如何将多个属性传递给 Angular.js 属性指令？

Posted 2023-02-16

【中文标题】如何将多个属性传递给 Angular.js 属性指令？

【英文标题】：How do I pass multiple attributes into an Angular.js attribute directive?

【发布时间】：2013-05-08 22:42:20

【问题描述】：

我有一个属性指令限制如下：

 restrict: "A"

我需要传入两个属性；一个数字和一个函数/回调，使用 attrs 对象在指令中访问它们。

如果指令是一个元素指令，用"E" 限制我可以这样做：

<example-directive example-number="99" example-function="exampleCallback()">

但是，由于我不会进入的原因，我需要该指令是一个属性指令。

如何将多个属性传递给一个属性指令？

【问题讨论】：

这取决于您的指令创建的范围类型（​​如果有）。选择是：没有新作用域（默认，或显式scope: false）、新作用域（具有正常原型继承，即scope: true）和隔离作用域（即scope: ... ）。你的指令创建什么类型的范围？

@MarkRajcok 它有一个隔离范围。

【参考方案1】：

如果你从另一个指令“需要”'exampleDirective' + 你的逻辑在'exampleDirective'的控制器中（比如说'exampleCtrl'）：

app.directive('exampleDirective', function () 
    return 
        restrict: 'A',
        scope: false,
        bindToController: 
            myCallback: '&exampleFunction'
        ,
        controller: 'exampleCtrl',
        controllerAs: 'vm'
    ;
);
app.controller('exampleCtrl', function () 
    var vm = this;
    vm.myCallback();
);

【参考方案2】：

该指令可以访问在同一元素上定义的任何属性，即使该指令本身不是该元素。

模板：

<div example-directive example-number="99" example-function="exampleCallback()"></div>

指令：

app.directive('exampleDirective ', function () 
    return 
        restrict: 'A',   // 'A' is the default, so you could remove this line
        scope: 
            callback : '&exampleFunction',
        ,
        link: function (scope, element, attrs) 
            var num = scope.$eval(attrs.exampleNumber);
            console.log('number=',num);
            scope.callback();  // calls exampleCallback()
        
    ;
);

fiddle

如果属性example-number 的值将被硬编码，我建议使用$eval 一次，并存储该值。变量num 将具有正确的类型（数字）。

【讨论】：

我已经编辑了示例 html 以使用蛇形大小写。我知道我不能将它用作元素。这就是问题的重点。

@Pedr，是的，对不起，我读得太快了关于元素的使用。我更新了答案，注意到您还需要对属性使用蛇形大小写。

没问题。感谢您的回答。我已经编辑了属性名称以使用蛇形大小写。如果我从你的答案中删除它，你可以吗？因为这只是我的一个愚蠢的错误，会分散实际问题和答案的注意力？

我不明白 - 指令如何知道在其范围内命名指令用法（“exampleCallback()”）中指定的完全相同的东西？ ("callback : '&exampleCallback') 范围不应该是 "callback : "&exampleFunction" 吗？

@FredrikL，对于同一元素的多个指令，请参阅***.com/a/28735005/215945

【参考方案3】：

您可以将一个对象作为属性传递并像这样将其读入指令中：

<div my-directive="id:123,name:'teo',salary:1000,color:red"></div>

app.directive('myDirective', function () 
    return             
        link: function (scope, element, attrs) 
           //convert the attributes to object and get its properties
           var attributes = scope.$eval(attrs.myDirective);       
           console.log('id:'+attributes.id);
           console.log('id:'+attributes.name);
        
    ;
);

【讨论】：

是否可以使用对象发送布尔值？我试过true，但它仍然返回字符串值true。

【参考方案4】：

这对我有用，我认为它更符合 HTML5。您应该更改您的 html 以使用 'data-' 前缀

<div data-example-directive data-number="99"></div>

并在指令中读取变量的值：

scope: 
        number : "=",
        ....
    ,

【参考方案5】：

您的操作方式与使用元素指令的方式完全相同。您将它们放在 attrs 对象中，我的示例通过隔离范围将它们进行双向绑定，但这不是必需的。如果您使用的是隔离作用域，则可以使用 scope.$eval(attrs.sample) 或仅使用 scope.sample 访问属性，但根据您的情况，它们可能不会在链接时定义。

app.directive('sample', function () 
    return 
        restrict: 'A',
        scope: 
            'sample' : '=',
            'another' : '='
        ,
        link: function (scope, element, attrs) 
            console.log(attrs);
            scope.$watch('sample', function (newVal) 
                console.log('sample', newVal);
            );
            scope.$watch('another', function (newVal) 
                console.log('another', newVal);
            );
        
    ;
);

用作：

<input type="text" ng-model="name" placeholder="Enter a name here">
<input type="text" ng-model="something" placeholder="Enter something here">
<div sample="name" another="something"></div>