Angularjs 在指令中嵌套指令

关于AngularJS指令，我遇到了一种情况，我从另一个指令中调用一个指令，我有以下问题

为什么我不能在链接函数中引用scope.bindValue？有没有办法从scope.bindValue计算一个值并将其设置为scope

为什么子直接绑定可以在作用域：{}中使用“@”，而不能在链接函数中使用scope.value=attrs.value

以下所有内容都可以在

HTML:

JS:

var myApp=angular.module（'myApp'，[]）；
var commonTemplate='{name}}绑定值是：{{{bindValue}}{{name}}值是：{{value}{{name}}添加一个到绑定值是：{{addOneBindValue}{{name}}添加一个到值是：{{addOneValue}
；
myApp.directive（'directive'，function（）{
返回{
范围：{
bindValue:“@”，
},
模板：commonTemplate+“
”，
限制：'E'，
链接：函数（范围、元素、属性）{
scope.name=“指令”；
scope.value=attrs.value；
scope.addOneBindValue=parseInt（scope.bindValue）+1；
scope.addOneValue=parseInt（scope.value）+1；
}
};
});
myApp.directive（'subDirective'，function（）{
返回{
范围：{
bindValue:“@”
},
模板：commonTemplate，
限制：'E'，
链接：函数（作用域、元素、属性）{
scope.name=“SubDirective”；
scope.value=attrs.value；
scope.addOneBindValue=parseInt（scope.bindValue）+1；
scope.addOneValue=parseInt（scope.value）+1；
}
};
});

输出：

Directive bind-value is: 12
Directive value is: 7
Directive add one to bind-value is: null    <--- why?
Directive add one to value is: 8    

SubDirective bind-value is: 7
SubDirective value is:                      <--- why?
SubDirective add one to bind-value is: null
SubDirective add one to value is: null  

指令绑定值为：12
指令值为：7
指令add one to bind value为：null插值属性（即使用{{}}的属性）和使用“@”定义的隔离作用域属性在链接函数运行时不可用。您需要使用
attrs.$observe（）
（或
scope.$watch（@property here，…）
）异步获取值

因此，
scope.bindValue
在您尝试使用它时不可用

类似地，在您的子目录中，属性
value
具有{{}}，因此当您试图使用它时，它的值也将不可用。您还需要为此定义一个“@”指令属性

工作

异步要求的原因是{{}内的项可能会更改，您通常希望您的指令注意到（然后执行一些操作，例如更新“addOne”值）。@当属性值包含{{}s时，通常与隔离作用域一起使用

如果属性值是常量，并且您不打算在模板（或templateUrl）中使用这些值，那么可能不应该使用“@”。在link函数中，如果值是一个字符串，只需使用
attrs.attrName
，如果属性是一个数字或布尔值（或者
parseInt（attrs.attrName）
如果知道它是一个数字），则只需使用
scope.$eval（attrs.attrName）
。
感谢您能够使用attrs.$observe（）。我将坚持在子方向上使用“@”，因为这对于我的场景应该足够了@史蒂文，我和你在同一时间制作了一把小提琴：）在我的小提琴中，我还演示了如何将
值
放入子方向。我还更新了我的答案，提供了一些更多的信息。关于“如果属性值是常量，@”可能不应该被使用“当我嵌套指令时会怎样？我的最外层指令可能看起来像，但由于它使用templateURL，所以它通过插值属性调用我的子指令。这是templateURL的正确用法，还是我应该自己通过angular.element构造元素并将其添加到模板中？对于我来说，为了避免插值属性，后者感觉像是做了很多额外的工作。
var myApp = angular.module('myApp', []);
var commonTemplate = '<div>{{name}} bind-value is: {{bindValue}} </div><div>{{name}} value is: {{value}} </div><div>{{name}} add one to bind-value is: {{addOneBindValue}} </div><div>{{name}} add one to value is: {{addOneValue}} </div><br/>';

myApp.directive('directive', function () {
    return {
        scope: {
            bindValue: "@",
        },
        template: commonTemplate + '<br/><sub-directive bind-value="{{value}}" value="{{value}}"></sub-directive>',
        restrict: 'E',
        link: function (scope, element, attrs) {
            scope.name = "Directive";
            scope.value = attrs.value;
            scope.addOneBindValue = parseInt(scope.bindValue) + 1;
            scope.addOneValue = parseInt(scope.value) + 1;
        }
    };
});


myApp.directive('subDirective', function () {
    return {
        scope: {
            bindValue: "@"
        },
        template: commonTemplate,
        restrict: 'E',
        link: function (scope, element, attrs) {   
            scope.name = "SubDirective";
            scope.value = attrs.value;
            scope.addOneBindValue = parseInt(scope.bindValue) + 1;
            scope.addOneValue = parseInt(scope.value) + 1;
        }
    };
});

Directive bind-value is: 12
Directive value is: 7
Directive add one to bind-value is: null    <--- why?
Directive add one to value is: 8    

SubDirective bind-value is: 7
SubDirective value is:                      <--- why?
SubDirective add one to bind-value is: null
SubDirective add one to value is: null