0

複数の用途のためにかなり一般的なダイアログディレクティブを作成しました...しかし、それを使用してデータを編集すると、元の呼び出し側コントローラーのスコープに双方向でバインドされます。

それはおそらく単純ですが、私は問題を抱えています。ダイアログ中にスコープを複製する必要があり、その後、okCallback の前にスコープをコピーして戻す必要があります...ユーザーが実際にキャンセルできるようにします。

<div mydialog 
    open="{{isEditDialogOpen}}"
    modal="true"
    ok-button="Yes"
    ok-callback="saveEdits"
    cancel-button="No"
    cancel-callback="dismissEditDialog"
    title="Edit Category">
        <input ng-model="categoryToEdit.name" label-text="Category Name"></input>  
</div>

問題はこのフィドルで明らかになります。http://jsfiddle.net/hiddenkirby/HT6X7/

カテゴリを編集し、ボックスに入力を開始します。

何かご意見は？ディレクティブの透過使用の側面を維持したいと思います。

この問題にアプローチ/解決するためのより「角度のある」方法はありますか?

4

2 に答える 2

1

編集フォームが表示されたら、現在のデータ値を変数/プロパティにコピーします。

$scope.showEditDialog = function(category, index){
    $scope.index = index;
    $scope.origData = angular.copy(category);

ユーザーがキャンセル/いいえを押した場合は、復元します。

$scope.dismissEditDialog = function(){
    $scope.categories[$scope.index] = $scope.origData;

HTML の変更:

<a ng-click="showEditDialog(category, $index)">Edit</a>

フィドル

于 2013-02-28T17:50:14.423 に答える
0

だから私は次のフィドルで締めくくりました。http://jsfiddle.net/hiddenkirby/FYCXk/

Isolateスコープを利用するために、transclusion をオフにしました。次に、パラメータ化されたモデル値（存在する場合）でangular.copyを実行しますが、それを取得します

scope.$parent["nameOfObjectOnParent"]

それをコピーすると、編集用のダイアログでキャンセル状態にすることができます。編集中のモデルのこの分離コピーの追加のボーナスは、validationCallbackで$watchする何かが得られることです。

必要に応じて、バインディングを使用してダイアログに完全なフォームを配置し、いくつかの検証ルールを使用してオブジェクトを渡すことができます。

于 2013-03-06T21:16:56.450 に答える