How to make null directives AngularJS?

Question

How to make null directives AngularJS?

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

The idea is to make when calling a unique directive, it render the directive corresponding to the preconfigured CSS framework.

For this I have a global variable var window.styleSource = "bootstrap"; (after which I can set whatever value you want) that defines the CSS framework name that I will use. I also have a directive to render the contents of the bootstrap like this:

var app = angular.module('app',[]);
app.directive('navBarControlBootstrap', function () {
    return {
        restrict: "E",
        template: "<div>teste bootstrap</div>",
        replace: true
    };
});

This is working okay, in the future I intend to use Metro-UI and for this I will create the navBarControlMetroui directive. The idea is to use the global variable to target the correct directive that will be rendered.

Now I need a% w_that is common, my attempt was as follows:

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

In this way I can call nav-bar-control in HTML and by the global variable it would callback <nav-bar-control></nav-bar-control> , in this case returning nomeDiretiva+styleSource content. But it's not working, any suggestions?

javascript angularjs angularjs-directives

asked by anonymous 15.04.2014 / 16:00

2 answers

1

@anisanwesley another option would be to inject the $ compile service into the directive and compile the directive that you need.

This way you would not be depending on any global variable and could inject only 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>

24.10.2014 / 19:52

Display column quantities in each table How to resolve "Array required, but (Class) found." error?

score 2 · Accepted Answer

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 concatenate styleSource into a variable and return it as template, like this:

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

When calling <nav-bar-control></nav-bar-control> output is teste bootstrap .. It worked. But there should be a simpler way to do this.