angularjs – 在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>

我有意地保持这个指令简单直接。你可能(并且可能会)必须重写它，以适应你的需要。