我正在努力在ng-repeat中动态添加不同的指令，但是输出不会被解释为指令。
我在这里添加了一个简单的例子：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>
如何使角度拾取通过ng-repeat输出的类中指定的指令？
我知道这是一个古老的问题，但是谷歌把我带到了这里，我不喜欢这里的答案。他们似乎对于应该简单的东西来说真的很复杂。所以我创建了这个指令：
原文链接：https://www.f2er.com/angularjs/144580.html*****新内容*****
我已经使这个指令更通用，支持解析(典型的角度值)“属性”属性。
/**
* 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的用例，您可以：
<li ng-repeat="color in colors">
<span attributes="{'class': color.name}"></span>
</li>
或者将其用作属性指令：
<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,attributes) {
element.append($compile('<div ' + attributes.directive + '></div>')($scope));
}
};
})
;
对于这个问题的具体情况，可以重写一下这个指令，以使它按照类的顺序应用指令，如下所示：
angular.module('attributes',attributes) {
element.replaceWith($compile('<span class=\"' + attributes.directive + '\"></span>')($scope));
}
};
})
;
然后，您可以在任何地方使用，并通过动态名称选择一个指令。使用它像这样：
<li ng-repeat="color in colors">
<span directive="{{color.name}}"></span>
</li>
我有意地保持这个指令简单直接。你可能(并且可能会)必须重写它，以适应你的需要。
