在ng-repeat中动态添加指令

Question

我正在尝试在ng-repeat中html" target="_blank">动态添加不同的指令，但是输出没有被解释为指令。

我在这里添加了一个简单的示例：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>

如何class通过ng-repeat 使角度拾取在中指定的指令？

Answer 1

我知道这是一个老问题，但是google将我带到了这里，但我不喜欢这里的答案。所以我创建了这个指令：

*新内容***

从那以后，我使该指令变得更加通用，支持已解析的（典型的角度值）“ attributes”属性。

/**
 * 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>

*结束新内容****

/**
 * 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));
        }
    };
})

;

对于此问题中的特定情况，可以稍微重写一下指令，以使其按类应用于该范围，如下所示：

angular.module('attributes', [])

.directive('directive', function($compile, $interpolate) {
    return {
        template: '',
        link: function($scope, element, attributes) {
            element.replaceWith($compile('<span class=\"' + attributes.directive + '\"></span>')($scope));
        }
    };
})

;

然后，您可以在任何地方使用它，并通过名称动态选择指令。像这样使用它：

<li ng-repeat="color in colors">
    <span directive="{{color.name}}"></span>
</li>

我故意使该指令简单明了。您可能（并且可能会）不得不重新命名以适应您的需求。