1

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?

2
  • Se você tem uma variável global, por que não utiliza-la na diretiva e, nela, compilar a subdiretiva conforme o valor? Commented 15/04/2014 às 14:14
  • 1
    Na propriedade 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 em app.config() Commented 15/04/2014 às 14:16

2 Respostas 2

2

Respondendo minha própria pergunta. Enquanto esperava respostas fiquei fazendo testes no JSBin e consegui resolver com algum remendo:

Na diretiva compartilhada eu concateno o styleSource em uma variavel e retorno ela como template, dessa forma:

app.directive('navBarControl',function () {
  var template="<nav-bar-control-"+styleSource+"></<nav-bar-control-"+styleSource;
  return{
     restrict: "E",
     template: template
    };
});

Ao chamar <nav-bar-control></nav-bar-control> a saída é teste bootstrap.. Funcionou. Mas deve haver uma forma mais simples de fazer isso.

1

@anisanwesley outra opção seria injetar o $compile service dentro da directive e compilar a directive que voce precisa.

Dessa forma você não ficaria dependendo de nenhuma variavel global e poderia injetar apenas os service/provider/constants que precisar para compilar a directive final.

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
    <script>

    var myApp = angular.module('myApp', []);

    myApp.constant('appConfig', {
        'framework': 'bootstrap'
    });

    myApp.directive('navBarControl', function (appConfig, $compile) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs, myController) {
                var template = '<nav-bar-control-' + appConfig.framework + '></<nav-bar-control-' + appConfig.framework + '>';
                var content = $compile(template)(scope);
                element.append(content);
                console.log(appConfig.framework);
            }
        };
    });

    </script>
</head>
<body>
    <div nav-bar-control></div>
</body>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .