1
The idea is to make sure that when calling a single directive, it renders the directive corresponding to the preconfigured CSS framework.
For this I have a global variable var window.styleSource = "bootstrap";
(then I can set the value you want) that defines the name of the CSS framework that I will use. I also have a directive to render bootstrap content like this:
var app = angular.module('app',[]);
app.directive('navBarControlBootstrap', function () {
return {
restrict: "E",
template: "<div>teste bootstrap</div>",
replace: true
};
});
This is working ok, in the future I intend to use the Metro-UI and for that I will create the directive navBarControlMetroui
.
The idea is precisely to use the global variable to direct to the correct directive that will be rendered.
Now I need a nav-bar-control
which is common, my attempt was the following:
app.directive('navBarControl',function () {
return {
restrict: "E",
scope:{},
template: "<nav-bar-control-{{styleSource}}></<nav-bar-control-{{styleSource}}>",
link:function(scope){
scope.styleSource=styleSource;
}
};
});
This way I can call <nav-bar-control></nav-bar-control>
in HTML and by the global variable it would make a "callback" tonomeDiretiva+styleSource
, in this case returning the content of <nav-bar-control-bootstrap>
. But it’s not working, any suggestions?
If you have a global variable, why not use it in the directive and compile the subdirectory in it according to the value?
– Beterraba
On the estate
link
of the "mother" directive I’m using it.. It is because this variable is only to run the test now, but I will probably put it in a previous to be called inapp.config()
– anisanwesley