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


116

我有一个属性指令,其限制如下:

 restrict: "A"

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

如果指令是元素指令,那么"E"我可以限制为:

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

但是,出于某种原因,我不再赘述,我需要将该指令作为属性指令。

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


这取决于您的指令创建的作用域类型(如果有)。选择包括:无新作用域(默认值或带有的显式值scope: false),新作用域(具有正常的原型继承,即scope: true)和隔离作用域(即scope: { ... })。您的指令创建哪种类型的作用域?
Mark Rajcok

1
@MarkRajcok具有隔离范围。
2013年

Answers:


202

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

模板:

<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

如果attribute的值example-number将被硬编码,则建议使用$eval一次并存储该值。变量num将具有正确的类型(数字)。


我已经编辑了示例HTML以使用蛇形保护套。我知道我不能将其用作元素。这就是问题的重点。
分心

@Pedr,是的,很抱歉,我对元素用法的阅读太快了。我更新了答案,并指出您也需要对属性使用蛇形保护套。
Mark Rajcok

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

我不明白这一点-指令如何知道在指令范围内使用指令用法(“ exampleCallback()”)中指定的名称完全相同?(“ callback:'&exampleCallback')范围不应该是” callback:“&exampleFunction”吗?
blaster 2013年

1
@FredrikL,有关同一元素的多个指令,请访问stackoverflow.com/a/28735005/215945
Mark Rajcok 2015年

19

您可以使用与element指令完全相同的方式进行操作。您将把它们放在attrs对象中,我的示例通过隔离范围将它们双向绑定,但这不是必需的。如果您使用的是隔离范围,则可以使用scope.$eval(attrs.sample)scope.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>

9

您可以将对象作为属性传递,然后将其读入指令中,如下所示:

<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
Peter Boomsma

4

这对我有用,我认为它更符合HTML5。您应该将html更改为使用“ data-”前缀

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

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

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

0

如果您从另一个指令“要求”“ 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();
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.