javascript - 从指令更新指令上的 ngModel

Question

我无法理解为什么对 ngModel 的更改不会从一个指令传播到另一个指令。 Here's a plunker that shows a simplified version of what we're trying to do .

基本上，我声明了一个使用 ngModel 的指令和一个隔离范围:

.directive('echo', function() {
    var link = function(scope, element, attrs, ngModel) {
        // --- 8< ---
        scope.$watch(attrs['ngModel'], function() {
            scope.model = ngModel.$modelValue;
            console.log("***** Echo model updated: ", scope.model);
        });
    };

    return {
        restrict: 'E',
        require: 'ngModel',
        link: link,
        scope: {
            id: "="
        }
    }
})

然后该指令被另一个指令包装，也依赖于 ngModel 并具有隔离范围:

.directive('wrapper', function() {
    var link = function(scope, element, attrs, ngModel) {
        scope.$watch(attrs['ngModel'], function() {
            var model = ngModel.$modelValue;
            console.log("----- Wrapper model updated", model);

            scope.model = model;
        })
    };

    return {
        restrict: 'E',
        require: 'ngModel',
        link: link,
        scope: {
        },

        template: "<div><h2>Echo:</h2> <echo id='myEcho' ng-model='model'></echo></div><div><h2>Model text:</h2>{{ model.text }}</div>"
    }
})

您可以看到“wrapper”指令需要 ngModel，echo 指令也是如此。

当我在 HTML 中使用“wrapper”指令，然后将一个值推送到 ngModel 中时，“wrapper”指令正确地识别出模型已更改(console.log 显示了这一点)。此时，包装器指令会在其范围内更新模型，我期望会将模型更新传播到“echo”指令中。

但是，观察控制台，“echo”指令永远不会看到模型得到更新。

问:为什么“echo”指令看不到“wrapper”指令更新后的模型？

注意:由于“echo”不仅仅从“wrapper”指令中消耗，因此这可能会变得稍微复杂一些 - 有时它是直接消耗的。

Answer 1

更新的答案:

不，该问题与计时无关 - 无论是在设置监视值之前还是之后添加监视，监视仍然会触发。

我建议在您的 echo 指令中放置一些断点，并逐步查看观察者的设置方式。

这是一个正在运行的更新后的插件:http://plnkr.co/edit/bbv2vpZ7KaDiblVcoaNX?p=preview

.directive('echo', function() {
    var link = function(scope, element, attrs, ngModel) {
        console.log("***** Linking echo");

        var render = function (val) {
            var htmlText = val || 'n/t';
            element.html(htmlText);
        };
        scope.$watch("model.text", render);
    };

    return {
        restrict: 'E',
        link: link,
        scope: {
            id: "=",
            model: '=echoModel'
        }
    }
})

.directive('wrapper', function() {
    var link = function(scope, element, attrs, ngModel) {
        console.log("---- Linking Wrapper");
    };

    return {
        restrict: 'E',
        require: 'ngModel',
        link: link,
        scope: {
          wrapperModel: '=ngModel'
        },

        template: "<div><h2>Echo:</h2> <echo id='myEcho' echo-model='wrapperModel'></echo></div><div><h2>Model text:</h2>{{ wrapperModel.text }}</div>"
    }
})

<小时/>

它不起作用的原因是 attrs 和观察者的工作方式可能有点意外。

基本上，您正在尝试查看作用域上的 scope.model 属性，而不是您可能期望的 ngModel 属性的评估值:

.directive('echo', function() {
    var link = function(scope, element, attrs, ngModel) {
        // Your HTML is `<echo ng-model='model'></echo>`
        // which means this `scopePropertyToWatch` will have the value 'model'.
        var scopePropertyToWatch = attrs['ngModel'];

        // This means it will try to watch the value
        // of `scope.model`, which isn't right because
        // it hasn't been set.
        scope.$watch(scopePropertyToWatch, function() {
            scope.model = ngModel.$modelValue;
            console.log("***** Echo model updated: ", scope.model);
        });
    };

    // ...
})

有两个简单的解决方案。

<强>1。在 ngModel 属性上设置双向绑定(bind):

.directive('echo', function() {
    var link = function(scope, element, attrs, ngModelCtrl) {
        // Watch the `scope.ngModel` property on the scope.
        // NOT the attr['ngModel'] value which will still
        // be 'model'.
        scope.$watch('ngModel', function() {
            scope.model = ngModelCtrl.$modelValue;
            console.log("***** Echo model updated: ", scope.model);
        });
    };

    return {
        restrict: 'E',
        require: 'ngModel',
        link: link,
        scope: {
            id: "=",
            ngModel: "=" // This will make the `ngModel` property available on the scope.
        }
    }
});

按照您的方式使用 ngModel 会有点复杂 - 我建议您观看此视频，了解如何在自定义组件中使用 ngModel:Jason Aden - Using ngModelController to Make Sexy Custom Components

<强>2。观察 $parent 作用域上的属性:

.directive('echo', function() {
    var link = function(scope, element, attrs, ngModelCtrl) {
        // Add a watch on the **parent** scope for the attribute value.
        // NOTE that we use the attrs['ngModel'] value because the property
        // on the parent scope **is**: `scope.$parent.model`
        scope.$parent.$watch(attrs['ngModel'], function() {
            scope.model = ngModelCtrl.$modelValue;
            console.log("***** Echo model updated: ", scope.model);
        });
    };

    return {
        restrict: 'E',
        require: 'ngModel',
        link: link,
        scope: {
            id: "="
        }
    }
});

同样，使用 ngModelCtrl.$modelValue 可能会变得有点复杂，但至少这会让你的观察者兴奋不已。