Javascript 如何将多个属性传递到Angular.js属性指令中？

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

 restrict: "A"

我需要传递两个属性；一个数字和一个函数/回调，使用

attrs

对象在指令中访问它们

如果指令是一个元素指令，受

“E”

限制，我可以：

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

但是，由于我不想深入讨论的原因，我需要将该指令作为属性指令

---

如何将多个属性传递到属性指令中？

执行方法与使用元素指令完全相同。您将在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>

---

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

模板：

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

---

如果属性

示例编号

的值将被硬编码，我建议使用一次并存储该值。变量

num

将具有正确的类型（一个数字）。

这对我很有效，我认为更符合HTML5。您应该将html更改为使用“数据-”前缀

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

---

您可以将对象作为属性传递，并将其读入指令，如下所示：

<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);
        }
    };
});

app.directive（'myDirective'，function（）{
返回{
链接：函数（范围、元素、属性）{
//将属性转换为对象并获取其属性
var属性=范围$eval（attrs.myDirective）；
console.log（'id:'+attributes.id）；
console.log（'id:'+attributes.name）；
}
};
});

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

---

这取决于指令创建的作用域类型（如果有）。选择包括：无新范围（默认，或显式使用

范围：false

）、新范围（使用正常原型继承，即

范围：true

），以及隔离范围（即

范围：{…}

）。您的指令创建了什么类型的作用域？@MarkRajcok它有一个隔离作用域。我已经编辑了示例HTML以使用snake case。我知道我不能把它当作元素。这就是问题的重点。@Pedr，是的，很抱歉我读得太快了，关于元素的用法。我更新了答案，注意到属性也需要使用snake-case。没问题。谢谢你的回答。我已经编辑了属性名称以使用snake case。如果我从你的答案中删除它，你会同意吗？因为这只是我犯的一个愚蠢的错误，分散了我对实际问题和答案的注意力？我不明白这一点-指令如何知道在其范围内命名与指令用法（“exampleCallback（）”）中指定的完全相同的东西？（“回调：'&exampleCallback'）范围不应该是“回调：”&exampleFunction“？@FredrikL，对于同一元素上的多个指令，请查看是否可以使用对象发送布尔值？我尝试了

{{true}

，但它仍然返回字符串值

true

。

scope: {
        number : "=",
        ....
    },

<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);
        }
    };
});

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();
});