javascript - 如何观看指令的指令 ng-model

Question

我有一个使用该 View 中的父作用域的指令。该指令有一个使用隔离作用域的子指令。我试图让父指令观察对子指令的 ngModel 所做的任何更改，并在进行更改时更新其自己的模态。这是一个可能解释得更好的 jsfiddle:http://jsfiddle.net/Alien_time/CnDKN/

代码如下:

   <div ng-app="app">
        <div ng-controller="MyController">

            <form name="someForm">
                <div this-directive ng-model="theModel"></div>
            </form>

         </div>
    </div>

Javascript:

    var app = angular.module('app', []);
app.controller('MyController', function() {

});

app.directive('thisDirective', function($compile, $timeout) {

    return {
        scope: false,

        link: function(scope, element, attrs) {
            var ngModel = attrs.ngModel;
            var htmlText = '<input type="text" ng-model="'+ ngModel + '" />' +
                           '<div child-directive ng-model="'+ ngModel + '"></div>';

            $compile(htmlText)(scope, function(_element, _scope) {
                element.replaceWith(_element);                
            });

            // Not sure how to watch changes in childDirective's ngModel ???????

        }, // end link
    } // end return

});

app.directive('childDirective', function($compile, $timeout) {
    return {
            scope: {
                ngModel: '='            
        },  

        link: function(scope, element, attrs, ngModel) {
            var htmlText = '<input type="text" ng-model="ngModel" />';

            $compile(htmlText)(scope, function(_element, _scope) {
                element.replaceWith(_element);                
            });   

            // Here the directive text field updates after some server side process
            scope.ngModel = scope.dbInsertId;

            scope.$watch('dbInsertId', function(newValue, oldValue) {
                if (newValue)
                    console.log("I see a data change!");  // Delete this later
                    scope.ngModel = scope.imageId;
            }, true);

        },

    } // end return
});

在示例中，您可以看到在父指令及其子指令中都有一个文本输入。如果您在其中的每一个中键入，另一个模型就会更新，因为它们被 ngmodel 绑定(bind)。但是，子指令的文本输入在服务器连接后得到更新。发生这种情况时，父指令中的文本输入不会更新。所以我想我需要观察子指令中的 ngModel 是否有任何变化。 我该怎么做？有道理吗？

Answer 1

正如@shaunhusain 提到的，您必须使用 ngModelController 与 ngModel 进行交互。在 ngModelController 上，您可以在 $modelValue 上设置监视，并且可以通过调用 $setViewValue 更改模型中的值。请记住，要使用 ngModelController，您需要将 require: "ngModel" 添加到指令定义对象中。

当您从 Angular 外部(例如从您的数据库)获取一个值并且您又想使用该值来更改模型值时，您需要将该代码包装在 scope.$apply()

app.directive('thisDirective', function($compile, $timeout, $log) {

    return {
        scope: false,
        require: 'ngModel',

        link: function(scope, element, attrs, ngModel) {
            ...

            scope.$watch(
                function(){
                    return ngModel.$modelValue;
                }, function(newValue, oldValue){
                    $log.info('in *thisDirective* model value changed...', newValue, oldValue);
                }, true);

        }, // end link
    } // end return

});

app.directive('childDirective', function($compile, $timeout, $log) {
    return {
        scope: {
            ngModel: '='
        },
        require: 'ngModel',

        link: function(scope, element, attrs, ngModel) {
            ...

            scope.$watch(
                function(){
                    return ngModel.$modelValue;
                }, function(newValue, oldValue){
                    $log.info('in *childDirective* model value changed...', newValue, oldValue);
                }, true);

            // make believe change by server
            setTimeout(function() {
                scope.$apply(function() {
                    ngModel.$setViewValue('set from the server...');
                };
            },5000);


        },

    } // end return
});

相关的jsfiddle http://jsfiddle.net/CnDKN/2/

但是 我不认为这不是 $setViewValue 的正确用法。根据文档，这应该用于更新 UI 上显示的值，不一定是模型值。

实际上还有另一种方法可以完成这项工作，我认为它更直接、更易于使用。只需使用 =attr 设置您要在 thisDirective 和 childDirective 中使用的属性的双向绑定(bind)。然后你可以在你的指令中设置 ng-model 属性设置，当你第一次使用它时你甚至不需要知道它在下面使用 ng-model。

这是向您展示我的意思的代码:

app.directive('thisDirective', function($compile, $timeout, $log) {

    return {
        scope: {
            thisval: '='
        },

        link: function(scope, element, attrs) {

            var htmlText = '<input type="text" ng-model="thisval" />' +
                           '<div child-directive childval="thisval"></div>';

            $compile(htmlText)(scope, function(_element, _scope) {
                element.replaceWith(_element);                
            });

            scope.$watch('thisval',function(newVal,oldVal){
                $log.info('in *thisDirective* thisval changed...',
                          newVal, oldVal);
            });


        }, // end link
    } // end return

});

app.directive('childDirective', function($compile, $timeout, $log) {
    return {
        scope: {
            childval: '='
        },

        link: function(scope, element, attrs) {
            var htmlText = '<input type="text" ng-model="childval" />';

            $compile(htmlText)(scope, function(_element, _scope) {
                element.replaceWith(_element);                
            });

            scope.$watch('childval',function(newVal,oldVal){
                $log.info('in *childDirective* childval changed...',
                          newVal, oldVal);
            });

            // make believe change that gets called outside of angular
            setTimeout(function() {
                // need to wrap the setting of values in the scope 
                // inside of an $apply so that a digest cycle will be 
                // started and have all of the watches on the value called
                scope.$apply(function(){
                    scope.childval = "set outside of angular...";
                });
            },5000);

        },

    } // end return
});

更新的 jsfiddle 示例:http://jsfiddle.net/CnDKN/3/