Question

我有一个父指令，它有一个函数在服务调用后加载带有数据的模态div。我已经确认该服务正确返回数据，但该数据模型永远不会通过模板传递给子指令的范围。

请注意，parentDirective的scope.warrantymodel由loadModal函数设置。另请注意，在父模板中，“warrantymodel”应映射到warrantyDirective的“模型”。

我已经使用chrome调试器和batarang调试了代码，但是范围。$ watch（'model'...）在页面加载时调用fire，但是在按钮单击加载数据后从不触发。我甚至尝试了范围内的深度监视开关。$ watch call（即“真实”值）。

app.directive('parentDirective', ["myService", function(myService){
   return {
      scope:{
          warranty: '=',
          ocode: '='
        },
        restrict: 'EA',
        templateUrl: '/content/templates/parent.html',
        link: function(scope){
        scope.loadModal = function ($event) {
            //TODO: this gets data but it doesnt bind to the modal's model
            scope.warrantymodel = 
                  myService.getDataStuff(scope.warranty, scope.ocode);
    };

这是应该获得模型的子指令：

app.directive('warrantyDirective', [function () {
    return {
        scope: {
            model: '='
        },
        restrict: 'EA',
        templateUrl: '/content/templates/warranty.html',
        link: function(scope) {
            scope.$watch('model', function (newValue, oldValue) {
                         // this alert never fires after page load
                         // I have verified that the newValue has a value 
                         // and is different than the original value 
                         // (original value is undefined on page load)
                          alert("$watch model = " + newValue);

                          // do dom manipulation and other stuff
                      }, true);

父母的模板调用保修模式的指令，如下所示：

<a data-ng-if="warranty" data-loading-text="Please wait..."  
   data-ng-click="loadModal($event)">{{ptext}}</a>

<div data-ng-if="warranty">
    <div warranty-directive model="warrantymodel"></div>
</div>

任何想法缺少什么或我如何进一步解决这个问题？

Answer 1

只是想知道为什么要使用2个指令？

看起来，在这种情况下，将控制器作为父句柄将服务中的数据添加到其$ scope会更直接，并从那里传递您需要的模型进入保修期。

或者就此而言，您可以使用0指令来实现相同的结果。（即将所有功能移出单独的指令并进入单个控制器）。

这看起来好像你在做任何显式的DOM转换，所以在这种情况下，使用2个指令可能会使事情过于复杂。

或者，查看指令的Angular文档：http://docs.angularjs.org/guide/directive 页面底部的最后一个示例解释了如何连接相关指令。

Answer 2

$ watch仅在观看的属性值发生变化时触发。即使您将另一个对象分配给相同值的属性，$ watch 也不会触发

scope.loadModal = function ($event) {

   scope.warrantymodel = [1]; //use the same value every this function is fired.
}

DEMO（尝试点击“点击此处”并观看控制台）

当我为对象分配不同的值时，$ watch会触发：

scope.loadModal = function ($event) {
            var ran = Math.random(); //use random to assign a different value.
            scope.warrantymodel = [ran];
}

DEMO（尝试点击“点击此处”并观看控制台）

在您的情况下，我认为getDataStuff每次点击加载时都会返回 相同的数据 ，并且$ watch不会触发。

Answer 3

我解决了这个问题：我将loadModal函数从parent指令移动到子指令，然后将打开modal div的链接移动到子指令的模板。从那里，一切都可以直接访问相同的scope.Model等，$ watch正常工作。

奇怪的是，角度的“双向绑定”不适用于$ watch。如果有人知道这是设计还是错误，请在评论中告诉我。

AngularJs指令不更新另一个指令的范围

3 个答案: