Question

有一个功能可以使用嵌套的角度指令。我正在添加一个可以观察到这种行为的简化示例。

这是HTML：

<body ng-app="myapp">
    <div>
        This is the first directive
        <first-directive my-val="9">
        </first-directive>
    </div>
</body>

和JavaScript：

var app = angular.module("myapp",[]);
app.directive("firstDirective",function(){
    return {
            template:'<second-directive val-new={{myVal}}></second-directive>',
            scope:{
                myVal:'@'
            },
            //transclude:true,
            link: {
                pre:function(scope,elem,attr){
                        scope.myVal=scope.myVal+"1";
                    }
            }
    }
});

app.directive("secondDirective",function(){
    return{
        scope:{
            valNew:'@'
        },

        link:{
            pre:function(scope,elem,attr){
                    console.log(scope.valNew);
                }
        }
    }
});

在控制台中，我得到了pre方法所做的更新结果，但是在html中，我得到了旧值。

控制台打印：“ 91” html dom包含：

    <second-directive val-new="9" class="ng-isolate-scope"></second-directive>>

请帮助我理解为什么会观察到这种差异以及如何使这两个地方保持一致

编辑我只是在寻找一种方法，以使第二个指令中的作用域变量对第一个指令的作用域的链接变量所做的更改做出反应。因此，在myVal发生更改的其他地方，我希望使第二个指令对更改做出反应。

Answer 1

将计算移至模板：

var app = angular.module("myapp",[]);
app.directive("firstDirective",function(){
    return {
            ̶t̶e̶m̶p̶l̶a̶t̶e̶:̶'̶<̶s̶e̶c̶o̶n̶d̶-̶d̶i̶r̶e̶c̶t̶i̶v̶e̶ ̶v̶a̶l̶-̶n̶e̶w̶=̶{̶{̶m̶y̶V̶a̶l̶}̶}̶>̶<̶/̶s̶e̶c̶o̶n̶d̶-̶d̶i̶r̶e̶c̶t̶i̶v̶e̶>̶'̶
            template:'<second-directive val-new="{{myVal+'1'}}"></second-directive>',
            scope:{
                myVal:'@'
            },
            //transclude:true,
            link: {
                pre:function(scope,elem,attr){
                    ̶s̶c̶o̶p̶e̶.̶m̶y̶V̶a̶l̶=̶s̶c̶o̶p̶e̶.̶m̶y̶V̶a̶l̶+̶"̶1̶"̶;̶
                }

            }
    }
});

属性（'@'）绑定创建一个观察程序，该观察程序在每个摘要周期将值从模板复制到隔离范围。观察者会在下一个摘要周期覆盖preLink函数中scope.myVal的修改。

Answer 2

问题在于您仅通过 @ 为值传递变量如果将其替换为' = '，它们将作为变量传递并进行更新

因此，以这种方式更改代码

app.directive("firstDirective",function(){
    return {
            template:'<second-directive val-new="myVal"></second-directive>',
            scope:{
                myVal:'='
            },
            //transclude:true,
            link: {
                pre:function(scope,elem,attr){
                        scope.myVal=scope.myVal+"1";
                    }
            }
    }
});

app.directive("secondDirective",function(){
    return{
        scope:{
            valNew:'='
        },

        link:{
            pre:function(scope,elem,attr){
                    console.log(scope.valNew);
                }
        }
    }
});

{{}}内部的值未按角度更新

2 个答案: