Attributi dell'ambito della direttiva senza ambito isolato in AngularJS

Question

Esiste un modo per ereditare l'ambito genitore mentre estende lo con gli attributi passati?

Voglio passare i parametri a una direttiva riutilizzabile direttamente dal modello senza dover modificare il DOM nella funzione di collegamento.

Ad esempio:

<form-input icon="icon-email" label="email" ng-model="data.input"></form-input> 

Per una direttiva come questa:

<div class="form-group"> 
     <label>{{label}}</label> 
     <div class="input-group"> 
     <div class="{{icon}}">@</div> 
     <input class="form-control" placeholder="Email" ng-model="mail.email"> 
     </div> 
    </div> 

ng-modello è nel campo di applicazione genitore, che controlla un intero modulo in questo caso, ma non credo è necessario memorizzare gli attributi di stile nel controller.

C'è un modo per passare i parametri direttamente nel modello senza creare un ambito isolato?

Answer 1

Non si sarebbe in grado di "estendere" l'ambito genitore in quanto tale. Tuttavia, il tuo obiettivo può essere raggiunto utilizzando gli attributi del tag direttiva che sono stati iniettati nella funzione di collegamento della tua direttiva.

Così ad es. per il fissaggio la variabile label, funzione di collegamento del vostro direttiva sarà simile di seguito:

link: function ($scope, $element, $attributes) { 
     $scope.label = $scope.$eval($attributes.label); 
     } 

è possibile controllare la plunker qui sotto per una dimostrazione dal vivo.
http://plnkr.co/edit/2qMgJSSlDyU6VwdUoYB7?p=preview

Answer 2

Il answer from Angad lavorerà per il collegamento statico, ma se il valore dell'attributo può cambiare dopo il collegamento, questo non sarà aggiornato. Se avete bisogno di questo, il sollution sarebbe quello di passare il valore come stringa invece di riferimento:

<form-input icon="icon-email" label="{{email}}" ng-model="data.input"></form-input> 

Nella direttiva, aggiungere un $ osservi sul attributo per aggiornare la variabile campo di applicazione:

$attributes.$observe('label', function(newValue){$scope.label=newValue}); 

Ora la variabile scope cambierà dinamicamente se il valore dell'attributo cambia.