118

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

 restrict: "A"

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

如果指令是一个元素指令,"E"我可以这样做:

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

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

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

4

5 回答 5

206

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

模板:

<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将具有正确的类型(数字)。

于 2013-05-14T17:37:35.310 回答
20

您的操作方式与使用元素指令的方式完全相同。您将它们放在 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>
于 2013-05-14T17:18:13.097 回答
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);
        }
    };
});
于 2016-07-19T12:24:21.777 回答
4

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

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

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

scope: {
        number : "=",
        ....
    },
于 2015-07-21T01:03:27.400 回答
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();
});
于 2017-03-16T17:35:59.897 回答