6

AngularJS の使用。双方向のデータバインディングを行いたいというディレクティブがあります。ディレクティブには、「activate」という属性があります。初期状態では、「activate」の値は「1」です。

ディレクティブの link 関数は、「activate」が「1」に等しいかどうかをチェックします。その場合、「アクティブ化」を 0 に変更しますが、他のことを行います。

後で、ディレクティブに何かを再度実行させたい場合は、コントローラーで「アクティブ化」を「1」に再度変更します。ディレクティブにはウォッチがあるため、サイクルが繰り返されます。

残念ながら、これを行うたびに、「ディレクティブ 'testDirective' で使用される式 '0' は割り当てられません!」というメッセージが表示されます。または「割り当て不可能なモデル式: 1 (ディレクティブ: testDirective)」。

HTML は次のとおりです。

<body ng-app="app">
    <test-directive activate="1"></test-directive>    
</body>

JS は次のとおりです。

var app = angular.module('app', []);


app.directive('testDirective', function() {
    return {
        restrict: 'E',
        scope: {
            activate : '='
        },


        link: function( scope, elem, attrs, controller ) {
            var el = elem[0];

            var updateContent = function() {
                el.innerText = 'Activate=' + scope.activate;
            };

            updateContent();
            attrs.$observe( 'activate', function() {
                console.log('Activate=' + scope.activate);
                if( scope.activate == '1') {
                    scope.activate = '0'
                    updateContent();
                }
            });
        }
    }
});

ここでは jsFiddle にあります: http://jsfiddle.net/justbn/mgSpY/3/

ディレクティブの属性に格納されている値を変更できないのはなぜですか? 2ウェイバインディングを使用しています。

ドキュメントには、「親スコープ プロパティが存在しない場合、NON_ASSIGNABLE_MODEL_EXPRESSION 例外がスローされる」と記載されています。

注: 更新コンテンツには、「アクティブ化」の値が正しく表示されます。ただし、"" の "activate" の値は更新されません。

ただし、親スコープのプロパティが存在するため、それは私には意味がありません。

何か案は？

4

2 に答える 2

3

スコープのプロパティを監視するには、scope.$watch代わりに次を使用する必要がありますattrs.$observe。

link: function(scope, elem, attrs, controller) {
  var el = elem[0];

  var updateContent = function() {
    el.innerText = 'Activate=' + scope.activate;
  };

  scope.$watch('activate', function(value) {                               
    console.log('Activate=', value);
    if(value === 1) {
      scope.activate = '0'                    
    }
    updateContent();
  });
}

ここでjsFiddle 。

ディレクティブがAngularによって処理される前に、そのプロパティにバインドされた値が利用可能であることを確認できない限り、コールバックupdateContent内のスコープのプロパティにのみ安全にアクセスできるため、リンク関数から呼び出しを削除したことに注意してください。$watch

$observe補間を含む DOM 属性 (たとえば、value="{{ value }}") の値の変化を観察/監視するためにのみ使用する必要があります。このSO の質問を確認して、理解を深めてください。

于 2013-09-06T22:53:41.040 に答える