Question

我正试图从指令内角度观察控制器的$viewValue。

小提琴：http://jsfiddle.net/dkrotts/TfTr5/5/

function foo($scope, $timeout) {
    $scope.bar = "Lorem ipsum";

    $timeout(function() {
        $scope.bar = "Dolor sit amet";
    }, 2000);
}

myApp.directive('myDirective', function() {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, controller) {
            scope.$watch(controller.$viewValue, function() {
                console.log("Changed to " + controller.$viewValue);
            });
        }
    } 
});

原样，$ watch函数没有捕获从控制器内部2秒后完成的模型更改。我错过了什么？

Answer 1

$watch接受要在范围内观看的属性的“名称”，您要求它观看该值。将其更改为观看返回“bar”的attrs.ngModel，现在您正在观看scope.bar。您可以按照相同的方式获取值，或者使用scope[attrs.ngModel]，就像说scope["bar"]一样，再次与scope.bar相同。

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

澄清user271996的评论：使用scope.$eval是因为您可以将对象表示法传递给ng-model属性。即ng-model="someObj.someProperty"因scope["someObj.someProperty"]无效而无效。 scope.$eval用于将该字符串计算为实际对象，以便scope["someObj.someProperty"]变为scope.someObj.someProperty。

Answer 2

想要添加：在1.2.x中，具有独立范围，以上不会起作用。 http://jsfiddle.net/TfTr5/23/

我想出的一个解决方法是使用$ watch也接受一个函数的事实，所以你可以使用它来访问你的控制器。

scope.$watch(
    function(){return controller.$viewValue},
    function(newVal, oldVal){
        //code
    }
)

工作小提琴：http://jsfiddle.net/TfTr5/24/

如果有人有替代方案，我很乐意欢迎它！

Answer 3

如果你想在一个孤立的范围内绑定一个值，有两种方法可以做到。你可以使用的第一种方法就是没有孤立的范围。这就是方法：

1）使用$attrs.any_attribute并绑定它（在监视中设置）

2）使用 2种方式绑定（＆＃39; =＆＃39;）方法并将其设置为监听器

如果你想要更多的例子，这里有一篇很棒的文章

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

Answer 4

如果你想要对模型值进行去抖动，那么值得一提的是 ng-model-option 中的去抖动设置：

<input type="text" ng-model-options="{ debounce: 1000 }" ng-model="search"/>

例如：此表在更改后触发1000毫秒并在新更改时重置。

scope.$watch(attrs.ngModel, function(newValue) { });

https://docs.angularjs.org/api/ng/directive/ngModelOptions

从内部指令监视控制器模型值

4 个答案: