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

问题是你$watchingattrs.ngModel等于“myModel”。您的范围内没有绑定“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

这是上面@Emmanuel 回答@Martin Velez 的延伸，虽然我知道已经很晚了！（另外我还不能发表评论，所以如果这不是合适的地方，对不起！）

我不确定使用的是哪个版本的 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 的值实际上不同于它们之前的值时才会被调用。

我将此解释为意味着从指令中 $watch ngModel 的正确方法是要求 ngModel 并实现注入 ngModelController 的链接函数。然后使用 $render-on-change ($watch) 或其他任何内容中内置的 ngModel API。

于 2015-05-13T16:54:52.650 回答
1

有两种方法可以做到这一点。

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 回答