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

javascript angularjs parameters directive attributes

2022-08-30 05:12:51

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

 restrict: "A"

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

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

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

但是，由于我不会深入讨论的原因，我需要该指令成为属性指令。

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

答案 1

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

模板：

<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

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

答案 2

执行此操作的方式与使用元素指令的方式完全相同。您将在attrs对象中拥有它们，我的示例通过分离范围将它们双向结合，但这不是必需的。如果使用隔离的作用域，则可以使用或仅使用 scope.sample 访问属性，但根据您的具体情况，可能不会在链接时定义这些属性。scope.$eval(attrs.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>