Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs – 在指令中嵌套指令大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
关于AngularJS指令,我遇到了一种情况,我从另一个指令中调用指令,我有以下问题.

>为什么我不能在我的链接功能中引用scope.bindValue?有没有办法可以从scope.bindValue计算一个值并将其设置为范围?
>为什么在范围内使用“@”表示子对象绑定:{}但是在链接函数中不使用scope.value = attrs.value?

以下所有内容均可在http://jsfiddle.net/sdg9/AjDtt/13/看到

HTML:

<directive bind-value="12" value="7"></directive>

JS:

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,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
链接函数运行时,插值属性(即使用{{}} s的属性和隔离用’@’定义的范围属性不可用.你需要使用attrs.$observe()(或范围.$watch(@ property here,…))来获取值(异步).

因此,当您尝试使用scope.bindValue时,它不可用.

同样,在subDirective中,属性值具有{{}} s,因此当您尝试使用它时,它的值也不可用.您还需要为此定义’@’指令属性.

工作fiddle.

异步要求的原因是{{}}内的项可能会发生变化,您通常希望指令注意(然后执行某些操作 – 例如更新“addOne”值).当属性值包含{{}}时,’@’通常与隔离范围一起使用.

如果属性值是常量,并且您不打算使用模板(或templateUrl)中的值,则可能不应使用“@”.在link函数中,如果值是字符串或作用域,则使用attrs.attrName.$eval(attrs.attrName)如果属性是数字或布尔值(或parseInt(attrs.attrName),如果你知道它是一个数字).

大佬总结

以上是大佬教程为你收集整理的angularjs – 在指令中嵌套指令全部内容,希望文章能够帮你解决angularjs – 在指令中嵌套指令所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。