Angularjs: come passare variabili di ambito a una direttiva?

Question

Sto cercando di usare la direttiva per creare e aggiungere diversi tag ad un <div> come illustrato di seguito:

module.directive('createControl', function(){ 
    return function(scope, element, attrs){  
    console.log(attrs.createControl); // undefined  
    }           
});           


<div class="control-group" ng-repeat="(k, v) in selectedControls"> 
    <div create-control="{{ v.type }}"></div> 
</div> 

In attrs ho questa costruzione:

$$element: b.fn.b.init[1] 
$$observers: Object 
$attr: Object 
createControl: "date" 
style: "margin-right: 15px" 
__proto__: Object 

Ma quando provo ad usare attrs.createControl I get undefined e non capisco perché. Domanda reale: come passare la variabile scope a una direttiva?

Answer 1

Leggi Attributi/osservazioni attributi interpolati sezione di directive docs. Durante la fase di collegamento gli attributi non sono stati impostati.

Ci sono diversi modi tra cui usare attrs.$observe o $timeout.

app.directive('createControl', function($timeout){ 
return function(scope, element, attrs){ 
     attrs.$observe('createControl',function(){ 
     console.log(' type:',attrs.createControl); 
     element.text('Directive text, type is: '+attrs.createControl); 
     }); 
    } 
}) ; 

DEMO

Answer 2

app.directive('createControl', function() { 
     return { 
     scope: { 
      createControl:'=' 
     }, 
     link: function(scope, element, attrs){  
      element.text(scope.createControl);  
     }  
     } 
    }) 

    <div class="control-group" ng-repeat="v in [{type:'green'}, {type:'brown'}]"> 
    <div create-control="v.type"></div> 
    </div> 

Answer 3

Se v.type potrebbe cambiare (cioè, si ha realmente bisogno di usare l'interpolazione - il {{}} s), utilizzare @ charlietfl del o @ answser di Joe, a seconda il tipo di ambito che desideri avere la tua direttiva.

Se v.type non cambierà (vale a dire, la vostra funzione di collegamento ha solo bisogno di ottenere i valori una volta, e questi valori sono garantiti da impostare quando la funzione di collegamento viene eseguito), è possibile utilizzare $parse o $eval invece. Questo ha un leggero vantaggio in termini di prestazioni in quanto non vengono creati orologi da $. (Con $observe() e =, angolare imposta $ orologi, che vengono valutati ogni ciclo digerire.)

<div create-control="v.type"></div> 

app.directive('createControl', function ($parse) { 
    return function (scope, element, attrs) { 
     console.log('$eval type:', scope.$eval(attrs.createControl)); 
     var type = $parse(attrs.createControl)(scope); 
     console.log('$parse type:', type); 
     element.text('Directive text, type is: ' + type); 
    } 
}); 

demo

Non