57

リンク関数内からモデル値を監視しようとしています。

scope.$watch(attrs.ngModel, function() {
       console.log("Changed"); 
    });

コントローラ内でモデル値を変更すると、$watch関数がトリガーされません。

$scope.myModel = "ACT";

$timeout(function() {
   $scope.myModel = "TOTALS"; 
}, 2000);

フィドル： http： //jsfiddle.net/dkrotts/BtrZH/4/

ここで何が欠けていますか？

4

6 に答える 6

153

監視している$modelValueを返す関数を監視する必要があります。

次のコードは、基本的な例を示しています。

app.directive('myDirective', function (){
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
           scope.$watch(function () {
              return ngModel.$modelValue;
           }, function(newValue) {
               console.log(newValue);
           });
        }
     };
});

これが同じアイデアの実行中のプランカーです。

于 2013-02-04T18:34:34.570 に答える
31

問題は、「myModel」に等しいものを使用していること$watchです。attrs.ngModelスコープに「myModel」がバインドされていません。あなたは$watch「モデル化」したい。それがあなたの指令の範囲に拘束されるものです。http://jsfiddle.net/BtrZH/5/を参照してください

于 2013-02-04T18:44:38.777 に答える
22

これを行う適切な方法は次のとおりです。

app.directive('myDirective', function () {
  return {
    require: 'ngModel',
    link: function (scope, element, attrs, ngModel) {

        ngModel.$render = function () {
            var newValue = ngModel.$viewValue;
            console.log(newValue)
        };

    }
  };
});
于 2014-11-24T08:28:32.913 に答える
8

これを行う別の方法は次のとおりです。

app.directive('myDirective', function (){
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
           attrs.$observe('ngModel', function(value){ // Got ng-model bind path here
              scope.$watch(value,function(newValue){ // Watch given path for changes
                  console.log(newValue);  
              });
           });
        }
    };
});

そうすることで、そのようなバインドで値の変化を聞くことができるようになります

于 2013-11-11T10:25:56.180 に答える
4

これは、@ Martin Velezに回答するための、上記の@ Emmanuelの回答の拡張ですが、かなり遅いことはわかっています。（また、私はまだコメントをすることができないので、これがこれに適切な場所でない場合は、申し訳ありません！）

Angular OPのどのバージョンが使用されているかはわかりませんが、Angular＃1.2 +では、少なくとも公式ドキュメントhttps://docs.angularjs.org/api/ng/type/ngModel.NgModelController#$render、$ renderこのようにリストされています：

ビューを更新する必要があるときに呼び出されます。ng-modelディレクティブのユーザーがこのメソッドを実装することが期待されます。

$ render（）メソッドは、次の状況で呼び出されます。

$ rollbackViewValue（）が呼び出されます。ビュー値を最後にコミットされた値にロールバックする場合、$ render（）が呼び出されて入力コントロールが更新されます。ng-modelによって参照される値はプログラムで変更され、$modelValueと$viewValueの両方が前回とは異なります。ng-modelは詳細な監視を行わないため、$ render（）は、$modelValueと$viewValueの値が実際に以前の値と異なる場合にのみ呼び出されます。

これは、ディレクティブからngModelを$ watchする正しい方法は、ngModelを要求し、ngModelControllerを挿入するリンク関数を実装することであると解釈します。次に、$ render-on-change（$ watch）などに組み込まれているngModelAPIを使用します。

于 2015-05-13T16:54:52.650 に答える
1

それを行うには2つの方法があります。

1）$attrs.[any_attribute]任意のリスナーを使用して設定できます

2）変数をバインドし、それにリスナーを設定する2つの方法でスコープを分離することができます。もっと必要な場合は、ここにクールな記事があります

http://www.w3docs.com/snippets/angularjs/bind-variable-inside-angularjs-directive-isolated-scope.html

于 2015-07-22T15:37:31.930 に答える