2016-05-14 18 views
13

Próbowałem użyć nowej składni Angular 1.5 component w projekcie, ale nie mogę wymyślić, jak wprowadzić zależność do definicji komponentu.Angular 1.5 component injection injection

Oto moja próba refactoring istniejącą dyrektywę do komponentu:

angular 
    .module('app.myModule') 
    .component('row', { 
     bindings: { 
     details: '@', 
     zip: '@' 
     }, 
     controller: 'RowController', 
     templateUrl: basePath + 'modules/row.html' // basePath needs to be injected 
    }) 

Z różnych powodów, możemy wstrzyknąć stałą basePath do wszystkich naszych dyrektyw w ramach templateUrl.

Jak to zrobić w komponencie, ponieważ definicja komponentu nie jest funkcją?

Odpowiedz

14

Możesz użyć funkcji dla templateUrl, aby skonstruować URL. Jednak w odróżnieniu od dyrektywy, funkcja jest wstrzykiwana (ref docs), co oznacza, że ​​można wstrzykiwać do niej stałą (lub dowolną inną usługę wstrzykiwania). Dokładnie to, czego potrzebujesz: notacja

.component('row', { 
    bindings: { 
    details: '@', 
    zip: '@' 
    }, 
    controller: 'RowController', 
    templateUrl: function(basePath, $rootScope) { // $rootScope is an example here 
    return basePath + 'modules/row.html' 
    } 
}) 

minifikacji bezpieczny tablica jest również obsługiwane:

templateUrl: ['basePath', '$rootScope', function(basePath, $rootScope) { 
    return basePath + 'modules/row.html' 
}] 

Demo:http://plnkr.co/edit/jAIqkzZGnaEVPaUjyBrJ?p=preview

+0

Perfect! Nie przyszło mi do funkcji templateUrl do funkcji. – epb