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

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接受要在范围内观看的属性的"名称",您要求它观察该值.改变它观看attrs.ngModel哪个返回"bar",现在你正在观看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/

如果有人有其他选择,我很乐意欢迎它!