0

次のように配列をフェッチするディレクティブが AngularJS にあります。

var current_element_list = scope.$apply($(this).attr('sortable-model'));

コードの残りの部分は次のようになります。

//in the controller
$scope.project.elements = [];

//in the html
<customDirective sortable-model='project.elements'>

scope.$apply は配列への参照を返す$scope.project.elementsので、ディレクティブで行った変更はそのモデルに保持されると思いました。ただし、配列に加えた変更は保存されないため、そうではないようです。sortable-model属性を介して取得したここからルートスコープの配列に変更を保存できる方法はありますか?

4

3 に答える 3

1

ご質問への回答

標準のプロトタイプ継承規則が適用されるため、ディレクティブ内の配列への変更を元の配列に反映させることは機能するはずです。これを行うときのディレクティブの意味（新しいスコープを作成する場合でも）：

current_element_list[0] = 'new value';

その変更は、コントローラーの$scope.project.elements変数に反映される必要があります。

ディレクティブが新しい​​ scopeを作成しない場合、ディレクティブscopeに渡される変数は、含まれているコントローラーの変数と同じである必要があります$scope。つまり、そのスコープにあるものは何でも好きなように直接変更できるはずです。したがって、ディレクティブでこれを行う場合:

scope.project.elements = ['new value'];

その変更は、コントローラーの$scope.project.elements変数にも反映される必要があります。

ディレクティブが分離スコープを作成する場合scope.$apply($(this).attr('sortable-model'))、属性の評価値を取得するために使用しないでください。代わりに、次を使用します。

scope : {
    current_element_list : '=sortableModel'
}

これにより、sortableModel の評価値への双方向データ バインディングが作成され、 を介してディレクティブにアクセスできるようになりますscope.current_element_list。

コードの改善案

この行に関して：

var current_element_list = scope.$apply($(this).attr('sortable-model'));

単に配列を「フェッチ」したい場合は、 use を使用する必要は$applyなく、代わりに を使用します$eval。この$apply関数は主に、AngularJS コンテキストに戻すために使用され、ダイジェスト ループをトリガーし、すべてのモデルのバランスが取れており、すべての変更が考慮されていることを確認します。$eval（$apply関数が呼び出す）は、指定されたスコープで指定された式を単純に評価します。

また、ディレクティブを使用すると、jQuery を使用して属性の名前や値、さらには要素自体をフェッチする必要がなくなります。リンク関数には 4 つの引数が渡されます。そのうちの 1 つは、要素の属性と属性値を持つオブジェクトです。ディレクティブのコントローラーには、同じものを返す $attrs サービスを注入することもできます。(ディレクティブのドキュメントを読む)

上記のコードを次のように書き直します。

link : function(scope, element, attrs, controllers) {
    // ...
    var current_element_list = scope.$eval(attrs['sortable-model']);
    // ...
}
于 2013-07-31T22:38:54.333 に答える
1

分離スコープを設定し、モデル値をディレクティブのローカルにマップする必要があります。

Angularjs ディレクティブ スコープ ドキュメントから:

= または =attr - attr 属性の値によって定義された name のローカル スコープ プロパティと親スコープ プロパティとの間の双方向バインディングを設定します。属性名が指定されていない場合、属性名はローカル名と同じであると見なされます。スコープのウィジェット定義: { localModel:'=myAttr' } を指定すると、ウィジェット スコープ プロパティ localModel は、親スコープの parentModel の値を反映します。parentModel への変更は localModel に反映され、localModel の変更は parentModel に反映されます。

angular("app")
  .directive('customDirective ', function () {
   return {
       restrict: 'E',
       link: function (scope, element, attrs) {
           scope.localModel.push("New Element");
       }, 
       scope:{
           localModel: '=sortableModel',
       }
   }
});
于 2013-07-31T22:21:24.427 に答える