0

次のようなディレクティブがあります。

var myApp = angular.module('myApp',[])
    .directive("test", function() {
      return {
        template: '<button ng-click="setValue()">Set value</button>',
        require: 'ngModel',
        link: function(scope, iElement, iAttrs, ngModel) {
          scope.setValue = function(){
            ngModel.$setViewValue(iAttrs.setTo);
          }
        }
      };
    });

問題は、このディレクティブをページで複数回使用するsetValueと、最後に宣言されたディレクティブでのみ呼び出されることです。明らかな解決策は、使用するスコープを分離することですscope: {}が、ngModel はディレクティブの外ではアクセスできません。</p>

ここに私のコードの JSFiddle があります: http://jsfiddle.net/kMybm/3/

4

2 に答える 2

3

このシナリオでは、ngModel はおそらく適切なソリューションではありません。これは主に、値をフォームにバインドして、それらをダーティにマークしたり、検証したりするためのものです...

ここでは、次のように、分離されたスコープから双方向バインディングを使用できます。

app.directive('test', function() {
   return {
      restrict: 'E',
      scope: { 
         target: '=target',
         setTo: '@setTo'
      },
      template: '<button ng-click="setValue()">Set value</button>',
      controller: function($scope) {
          $scope.setValue = function() {
              $scope.target = $scope.setTo;
          };
          //HACK: to get rid of strange behavior mentioned in comments
          $scope.$watch('target',function(){});
      }
   };
});
于 2012-10-24T13:41:41.120 に答える
2

scope: trueディレクティブ ハッシュに追加するだけです。これにより、ディレクティブのインスタンスごとに新しい継承子スコープが作成され、既に使用されているスコープで「setValue」を継続的に上書きする必要がなくなります。

そして、スコープの分離については正しいです。初心者への私のアドバイスは、決して使用しないことです。

コメントへの返信:

質問がよくわかりました。式を介して値を設定すると、最も近いスコープに設定されます。したがって、Angular で一般的に行うことは、値を上書きするのではなく、値を読み取って変更することです。これには、オブジェクトや配列などの構造に含まれるものが必要です。

更新されたフィドルを参照してください：

http://jsfiddle.net/kMybm/20/

(「foo」は通常、ngController 経由で接続されたコントローラーに入ります。)

別のオプションは、本当に「スコープレス」にしたい場合は、ng-click を使用せず、自分でクリックを処理することです。

http://jsfiddle.net/WnU6z/8/

于 2012-10-25T03:07:15.623 に答える