2016-07-08 11 views
5

ho una direttiva personalizzato che assomiglia a questo:

<my-queue id="report.id" version="report.version"></my-queue> 

Nel mio oggetto di definizione direttiva Ho riferimento il mio controller e la portata in questo modo:

controller: 'QueueController', 
controllerAs: 'myQueue', 
scope: { 
    id: '=', 
    version: '=' 
} 

Nel mio controller ho impostato var vm = this così posso fare riferimento alle variabili scope come vm.variable. Tuttavia, questo non funziona per id e version. Ho scoperto che ho bisogno di iniettare $scope e fare riferimento a queste proprietà come $scope.id e $scope.version. C'è un modo per configurarlo in modo che io possa evitare di iniettare $scope e rimanere coerente con il resto del mio controller facendo riferimento a vm.id e vm.version?

+0

No. La creazione di un oggetto isolato come quello che hai è il modo corretto di gestirlo. – jbrown

risposta

4

La proprietà controllerAs sul vostro oggetto config direttiva sarà quello che si utilizza per fare riferimento all'istanza del controller, quindi se si desidera utilizzare vm nel modello, si avrà bisogno di impostare la proprietà controllerAs a vm. Inoltre, impostando la proprietà bindToController per true è possibile associare direttamente al modello di vista invece di $ portata:

function myQueue() { 
    return { 
     restrict: 'E', 
     template: ... , 
     controller: myQueueCtrl, 
     controllerAs: 'vm', 
     scope: { 
      id: '=', 
      version: '=' 
     }, 
     bindToController: true 
    } 
} 

con la configurazione attuale direttiva, il vostro riferimento controllerAs sarà sotto myQueue, non vm, cioè tutte le proprietà voi creare sul tuo vm (ad esempio vm.id) nel controller sarà myQueue nel modello (ad esempio myQueue.id).

Aggiungendo bindToController non abbiamo bisogno di iniettare $ portata nel controllore della direttiva:

function QueueController() { 
    var vm = this; 
} 

Quindi è possibile fare riferimento ai Vars nel modello direttiva come

{{vm.id}} 
{{vm.version}} 

C'è un plunker here della direttiva con bindToController impostato su true e controllerAs impostato su vm.