Direttiva AngularJS: modello di compilazione e ambito di controllo

Question

Scrivo un'applicazione molto complessa su Angularjs. Questo è già abbastanza grande da confondermi. Studio Angular in modo più approfondito e vedo che il mio codice è cattivo. Ho capire questo concetto:

module.directive('createControl', function($compile, $timeout){ 
    scope: { 
      // scope bindings with '=' & '@' 
      },                             
    template: '<div>Template string with binded {{ variables }}</div>',   
    link: function(scope, element, attrs){ 
      // Function with logic. Should watch scope. 
      } 

ho diversi problemi:

• Il mio modello è complicato, ho parte del modello che va nella funzione di collegamento dinamico
• ho bisogno di aggiungere template compilato per l'elemento, non per sostituire.
• Con concetto di cui sopra il mio modello vengono aggiunti senza alcuna interpolazione ...

Quindi il mio codice è alla ricerca di simile in vista semplificata:

module.directive('createControl', function($compile, $timeout){ 
    scope: { 
       var1: '@var1', 
       var2: '@var2', 
       var3: '@var3' 
      },                             
    template: '<div>{{ var1 }} {{ var3 }}</div>',   
    link: function(scope, element, attrs){ 
       $('.someelement').on('event', function(){ 
       var2 = 'SNIPPET'; // Need to watch it 
       }); 
       var3 = '<span>{{ var2 }}</span>'; 
      } 
    }) 

Le mie domande sono:

Come compilare il mio modello con variabili scope?

Come visualizzare le variabili di ambito?

Devo dividere la mia direttiva per due? Se dovessi, come farlo nel modo giusto?

Answer 1

Credo che cambiare la direttiva da:

module.directive('createControl', function($compile, $timeout){ 
    scope: { 
       var1: '=var1', 
       var2: '=var2', 
       var3: '=var3' 
      },                             
    template: '<div>{{var1}} {{var3}}</div>',   
    link: function(scope, element, attrs){ 
       $('.someelement').on('event', function(){ 
       scope.var2 = 'SNIPPET'; // Need to watch it 
       }); 
       /*I do not see what you want to do*/ 
       scope.var3 = $compile('<span>{{var2}}</span>')(scope); 
      } 
    }) 

Answer 2

angolare 1.1.4 rilasciato in ultime settimane capacità aggiunto per template per accedere agli attributi in direttive:

Esempio:

app.directive('mytest',function(){ 
    return { 
    restrict:'E',  
    template:function(elem,attrs){  
     return '<div>'+attrs.a+' '+attrs.b+'</div>'; 
    } 
    } 
}); 

<mytest a="Hello" b="World"></mytest> 

DEMO

Vedi directive docs for version 1.1.4