l'ajout dynamique de directives en ng-repeat

Je sais que c'est une vieille question, mais google m'a amené ici, et je n'aimais pas les réponses ici... Ils semblaient vraiment compliqué pour quelque chose qui devrait être simple. J'ai donc créé cette directive:

***** NOUVEAU CONTENU * * * * * *

Depuis, j'ai fait cette directive plus générique, en soutenant un analysée (typique de la valeur angulaire) "attributs" de l'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);
            };
        }
    };
});

Pour l'OP de cas d'utilisation, vous pouvez faire:

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

Ou de l'utiliser comme un attribut de la directive:

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

***** FIN DU NOUVEAU CONTENU ******

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

;

Pour le cas spécifique de cette question, on peut réécrire la directive, un peu pour le faire appliquer la directive à une plage par classe, de la manière suivante:

angular.module('attributes', [])

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

;

Alors vous pouvez l'utiliser n'importe où et sélectionnez une directive par son nom de façon dynamique. L'utiliser comme ceci:

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

J'ai volontairement gardé la présente directive et simple à utiliser. Vous pouvez (et probablement) ont de le remanier en fonction de vos besoins.

Je ne pense pas que vous serez en mesure de simplement attribuer la directive comme un nom de classe - vous besoin d'exécuter ce à travers $compile de nouveau, ce qui serait de descendre vers le chemin de la récursivité des erreurs.

Une solution possible est décrite à: AngularJS - comment avoir une directive avec une dynamique sous-directive

Si cela fonctionne pour votre cas d'utilisation, vous pouvez utiliser des modèles plutôt:

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