我正在努力在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输出的类中指定的指令?
我知道这是一个古老的问题,但是谷歌把我带到了这里,我不喜欢这里的答案。他们似乎对于应该简单的东西来说真的很复杂。所以我创建了这个指令:
*****新内容*****
我已经使这个指令更通用,支持解析(典型的角度值)“属性”属性。
/** * 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>
我有意地保持这个指令简单直接。你可能(并且可能会)必须重写它,以适应你的需要。