A ideia é fazer com que ao chamar uma diretiva unica, ele renderize a diretiva correspondente ao framework de CSS pré configurado.
Para isso eu tenho uma variavel global var window.styleSource = "bootstrap";
(depois posso setar o valor que quiser) que define o nome do framework de CSS que irei utilizar. Também disponho de uma diretiva para renderizar o conteudo do bootstrap assim:
var app = angular.module('app',[]);
app.directive('navBarControlBootstrap', function () {
return {
restrict: "E",
template: "<div>teste bootstrap</div>",
replace: true
};
});
Esta está funcionando ok, futuramente pretendo utilizar o Metro-UI e para isso criarei a diretiva navBarControlMetroui
.
A ideia é justamente usar a variavel global para direcionar à diretiva correta que será renderizada.
Agora preciso de um nav-bar-control
que seja comum, minha tentativa foi a seguinte:
app.directive('navBarControl',function () {
return {
restrict: "E",
scope:{},
template: "<nav-bar-control-{{styleSource}}></<nav-bar-control-{{styleSource}}>",
link:function(scope){
scope.styleSource=styleSource;
}
};
});
Desta forma eu posso chamar <nav-bar-control></nav-bar-control>
no HTML e pela variavel global ele faria um "callback" paranomeDiretiva+styleSource
, neste caso retornando o conteudo de <nav-bar-control-bootstrap>
. Mas não esta funcionando, alguma sugestão?
link
da diretiva "mãe" estou utilizando ela..É porque essa variavel é só pra funcionar o teste agora, mas provavelmente colocarei ela em um provider para ser chamada emapp.config()