在 ng-repeat 中动态添加指令 [英] dynamically adding directives in ng-repeat
问题描述
我正在尝试在 ng-repeat 中动态添加不同的指令,但是输出没有被解释为指令.
I am trying to dynamically add different directives in an ng-repeat however the output is not being interpreted as directives.
我在这里添加了一个简单的例子:http://plnkr.co/edit/6pREpoqvmcnJJWzhZZKq
I've added a simple example here: http://plnkr.co/edit/6pREpoqvmcnJJWzhZZKq
控制器:
$scope.colors = [{name:"red"}, {name: "blue"}, {name:"yellow"}];
指令:
app.directive("red", function () {
return {
restrict: 'C',
template: "RED directive"
}
});
HTML:
<ul>
<li ng-repeat="color in colors">
<span class="{{color.name}}"></span>
</li>
</ul>
如何让 angular 拾取通过 ng-repeat 输出的 class
中指定的指令?
How do I make angular pick up the directive specified in the class
that is output via ng-repeat?
推荐答案
我知道这是一个老问题,但 google 把我带到这里,我不喜欢这里的答案......它们似乎对于某些事情来说真的很复杂应该很简单.所以我创建了这个指令:
I know this is an old question, but google brought me here, and I didn't like the answers here... They seemed really complicated for something that should be simple. So I created this directive:
***** 新内容 *****
***** NEW CONTENT *****
我已经使这个指令更通用,支持解析的(典型的角度值)属性"属性.
I've since made this directive more generic, supporting a parsed (the typical angular value) "attributes" attribute.
/**
* Author: Eric Ferreira <http://stackoverflow.com/users/2954747/eric-ferreira> ©2016
*
* This directive takes an attribute object or string and adds it to the element
* before compilation is done. It doesn't remove any attributes, so all
* pre-added attributes will remain.
*
* @param {Object<String, String>?} attributes - object of attributes and values
*/
.directive('attributes', function attributesDirective($compile, $parse) {
'use strict';
return {
priority: 999,
terminal: true,
restrict: 'A',
compile: function attributesCompile() {
return function attributesLink($scope, element, attributes) {
function parseAttr(key, value) {
function convertToDashes(match) {
return match[0] + '-' + match[1].toLowerCase();
}
attributes.$set(key.replace(/([a-z][A-Z])/g, convertToDashes), value !== undefined && value !== null ? value : '');
}
var passedAttributes = $parse(attributes.attributes)($scope);
if (passedAttributes !== null && passedAttributes !== undefined) {
if (typeof passedAttributes === 'object') {
for (var subkey in passedAttributes) {
parseAttr(subkey, passedAttributes[subkey]);
}
} else if (typeof passedAttributes === 'string') {
parseAttr(passedAttributes, null);
}
}
$compile(element, null, 999)($scope);
};
}
};
});
对于 OP 的用例,您可以这样做:
For the OP's use case, you could do:
<li ng-repeat="color in colors">
<span attributes="{'class': color.name}"></span>
</li>
或者将其用作属性指令:
Or to use it as an attribute directive:
<li ng-repeat="color in colors">
<span attributes="color.name"></span>
</li>
***** 结束新内容******
***** END NEW CONTENT ******
/**
* Author: Eric Ferreira <http://stackoverflow.com/users/2954747/eric-ferreira> ©2015
*
* This directive will simply take a string directive name and do a simple compilation.
* For anything more complex, more work is needed.
*/
angular.module('attributes', [])
.directive('directive', function($compile, $interpolate) {
return {
template: '',
link: function($scope, element, attributes) {
element.append($compile('<div ' + attributes.directive + '></div>')($scope));
}
};
})
;
对于这个问题的具体情况,可以稍微重写指令,使其按类将指令应用于跨度,如下所示:
For the specific case in this question, one can just rewrite the directive a bit to make it apply the directive to a span by class, as so:
angular.module('attributes', [])
.directive('directive', function($compile, $interpolate) {
return {
template: '',
link: function($scope, element, attributes) {
element.replaceWith($compile('<span class=\"' + attributes.directive + '\"></span>')($scope));
}
};
})
;
然后你可以在任何地方使用它并动态地按名称选择指令.像这样使用它:
Then you can use this anywhere and select a directive by name dynamically. Use it like so:
<li ng-repeat="color in colors">
<span directive="{{color.name}}"></span>
</li>
我特意让这个指令简单明了.您可能(并且可能会)不得不重新编写它以满足您的需要.
I purposely kept this directive simple and straightforward. You may (and probably will) have to reword it to fit your needs.
这篇关于在 ng-repeat 中动态添加指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!