dynamisches hinzufügen von Richtlinien in ng-repeat

Ich weiß, das ist eine alte Frage, aber google hat mich hierher gebracht, und ich wusste nicht, wie die Antworten hier... Sie schien wirklich zu kompliziert für etwas, das einfach sein sollte. So habe ich diese Richtlinie:

***** NEUER INHALT *****

Hab ich da aus dieser Richtlinie allgemeiner, stehend analysiert (die typisch eckigen Wert) "Attribute" Attribut.

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

Für die OP ' s verwenden, Fall Sie tun könnten:

<li ng-repeat="color in colors">
    <span attributes="{'class': color.name}"></span>
</li>

Oder verwenden Sie es als ein Attribut der Richtlinie:

<li ng-repeat="color in colors">
    <span attributes="color.name"></span>
</li>

***** ENDE NEUE INHALTE ******

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

;

Für den speziellen Fall, der in dieser Frage kann man nur umschreiben, dass die Richtlinie ein wenig zu machen, wenden Sie die Richtlinie auf eine Zeitspanne, die durch die Klasse, als 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));
        }
    };
})

;

Dann können Sie diese überall, und wählen Sie eine Richtlinie, indem Sie den Namen dynamisch. Verwenden Sie es wie so:

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

Habe ich absichtlich gehalten diese Richtlinie einfach und unkompliziert. Sie kann (und wird vermutlich) haben es umformulieren, um Ihre Bedürfnisse anzupassen.

Ich glaube nicht, dass Sie werde in der Lage sein, um einfach ordnen Sie die Richtlinie, wie der name einer Klasse - Sie würde laufen müssen, diese durch $compile wieder, das wäre die überschrift auf dem Weg in Richtung Rekursion Fehler.

Eine mögliche Lösung ist skizziert in: AngularJS - wie eine Richtlinie mit einer dynamischen sub-Richtlinie

Wenn es funktioniert, für Ihren Fall, Sie können Vorlagen verwenden, stattdessen:

<div ng-repeat='template in inner' ng-include='template'></div>