loop attraverso gli attributi forniti

Question

Sono nuovo di angolare, ho un requisito in cui ho bisogno di aggiungere molti attributi personalizzati a una direttiva di elemento personalizzato, <radio-button>. Attualmente, sto facendo in questo modo:

<radio-button one-attr="some value" two-attr="some string" three-attr="some other string"><radio-button> 

Ho molti pulsanti di opzione nella pagina e la scrittura attributi personalizzati per ogni direttiva personalizzato in quella pagina sembra disordinato. Quindi, sto cercando un'alternativa in cui posso passare un oggetto array javascript che si sposta su ogni direttiva personalizzata radio-button.

Per esempio: (regolatore)

$scope.values = [{ 
     'one-attr': 'some value', 
     'two-attr': 'some other value', 
     'three-attr': 'another value', 
     /* and so on... */ 
    }, 
    { 
     /* another custom attribute set */ 
    } 
    /* so on */ 
    ] 

e poi alla mia direttiva personalizzato, passerò un custom attribute directive come illustrato di seguito:

<radio-button ng-repeat="(key, value) in values" loop-attributes="key, value"></radio-button> 

Dove sopra loop-attributes è un attributo personalizzato direttiva applicata alla direttiva degli elementi personalizzati.

Si prega di suggerire come procedere.

Se sbaglio, mi suggerisca come gestirlo.

Answer 1

Si sarebbe probabilmente necessario utilizzare $ compilazione servizio come RadioButton è una direttiva personalizzato . Si potrebbe avere una direttiva padre che ha un elenco di attributi e all'interno della direttiva creare l'elemento radiobutton con attributi e quindi compilarlo. Ho usato il tipo di input per esempio.

http://plnkr.co/edit/7ANndIuHCFaGyjWkw7sa?p=preview

// custom element 
.directive('customInput', function() { 
    return { 
    replace: true, 
    restrict: 'E', 
    template: '<input type="text"></input>' 
    }; 
}) 

//wrapper directive 
.directive('customInputAttr', function($compile) { 
    return { 
    restrict: 'E', 
    link: function(scope, element, attrs) { 
     // This could be set even in controller 
     scope.elemAttrs = [{ 
     'class': 'class1', 
     'ng-model': 'input1' 
     }, { 
     'class': 'class2', 
     'ng-model': 'input2' 
     }]; 

     angular.forEach(scope.elemAttrs, function(elemAttr) { 
     var customInputElem = angular.element('<custom-input></custom-input>'); 
     angular.forEach(elemAttr, function(value, key) { 
      customInputElem.attr(key, value) 
     }); 

     var elem = $compile(customInputElem)(scope); 
     element.append(elem); 
     }); 

    } 
    }; 
}) 

Answer 2

Si vorrà utilizzare una direttiva che sostituisce se stessa con altre direttive. Puoi vedere here per come farlo. Ho fatto un jsfiddle per mostrarti come funziona. La ripetizione deve essere su un elemento esterno e non sull'elemento contenente la direttiva stessa. Questo perché la tua direttiva custom-attr verrà analizzata prima che venga eseguita l'analisi dello ng-repeat, quindi non avrà ancora un valore per attr.

MODIFICA: ho escluso una fase di importazione alla fine della funzione di collegamento, mi dispiace. This il violino aggiornato dovrebbe funzionare. È necessario ricompilare la direttiva per rendere effettiva la direttiva ng-click aggiunta. Si devono anche fare in modo di rendere la funzione che stai vincolante ng-click a disposizione di tale ambito, sia facendola passare in o usando ng-click="$parent.foo()"