How to make nested directives Angularjs?

Asked

Viewed 1,019 times

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?

javascript angularjs angularjs-directives

  • If you have a global variable, why not use it in the directive and compile the subdirectory in it according to the value?

  • 1

    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 in app.config()

2 answers

2


Answering my own question. While waiting for answers I was doing tests in Jsbin and managed to solve with some patch:

In the shared directive I concateno styleSource in a variable and return it as template, thus:

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

By calling <nav-bar-control></nav-bar-control> the exit is teste bootstrap.. It worked. But there must be a simpler way to do that.

1

@anisanwesley another option would be to inject the $Compile service within Directive and compile the Directive that Voce needs.

This way you wouldn’t be depending on any global variable and could only inject the service/Provider/constants you need to compile the final Directive. 

<!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>

Browser other questions tagged javascript angularjs angularjs-directives

You are not signed in. Login or sign up in order to post.