How to load angularjs directive use $injector

Question

I'm trying to use directive from other modules that is loaded by angular.injector but angular can't understand directives that is in other_module.
In my main file, I declare my module.

  angular.module('blockApp', []).directive('', []);

In second file, I try to add angularCharts as dependency:

  var otherBlock = angular.module('blockApp');
  otherBlock.run(function() {
      angular.injector(['ng', 'angularCharts']);
  });

Then I use angularCharts's directives but angularjs can't identify them. I know we should add dependent modules when we declare module but it is special case.

You can get it.. Well you need to get it. angular.injector(['ng', 'other_module']).get('directiveNameDirective'); postFix directive name with "Directive" — PSL
– PSL, Commented Oct 8, 2014 at 3:41
Thanks PSL but it got Error: [$injector:unpr] Unknown provider: $rootElementProvider <- $rootElement <- acChartDirective. In my case your suggestion is angular.injector(['ng', 'angularCharts']).get('acChartDirective'); — Kien
– Kien, Commented Oct 8, 2014 at 3:57
@PSL angular.injector(['ng','other_module']).get('directiveNameDirectirve) calls to other_module.directive('directiveName, function() {}) but angular still doesn't understand directiveName. I think we still need register directiveName to angular... — Kien
– Kien, Commented Oct 8, 2014 at 7:29

noypi · Accepted Answer · 2014-10-08 07:42:12Z

1

here's a plnkr http://plnkr.co/edit/Q5oD65wSvBAemf5BCDL7?p=preview

In this case you can use $compile (you still need a $scope from the example, but $compile pretty much answers your question I guess),

    var $compile = chartsInjector.get("$compile");
    console.log("$compile=",$compile);

    var chartsDirective = $compile("<div charts></div>");
    console.log(chartsDirective);

...

  var blockapp = angular.module('blockApp', []); 
  blockapp.run(function(){
    // create a new injector
    var chartsInjector = angular.injector(['ng', 'angularCharts']);
    console.log("chartsInjector=",chartsInjector);

    var $compile = chartsInjector.get("$compile");
    console.log("$compile=",$compile);

    var chartsDirective = $compile("<div charts></div>");
    console.log(chartsDirective);
  })

note that you will be creating multiple injectors here.

injector 1) created by ng-app

<body ng-app="blockApp">

injector 2) created by angular.injector()

var chartsInjector = angular.injector(['ng', 'angularCharts']);

whole code

<!DOCTYPE html>
<html>

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script type="text/javascript">
      // creating the angularcharts
      angular.module('angularCharts', []).directive('charts', function(){
        return function(){}
      }); 

      // creating blockapp
      angular.module('blockApp', []).directive('', []); 

      // retrieving the created blockapp
      // NOTE! ng-app will create a new injector for blockapp 
      var blockapp = angular.module('blockApp', []); 
      blockapp.run(function(){
        // create a new injector
        var chartsInjector = angular.injector(['ng', 'angularCharts']);
        console.log("chartsInjector=",chartsInjector);

        var $compile = chartsInjector.get("$compile");
        console.log("$compile=",$compile);

        var chartsDirective = $compile("<div charts></div>");
        console.log(chartsDirective);
      })

    </script>
  </head>

  <body ng-app="blockApp">

  </body>

</html>

plnkr http://plnkr.co/edit/Q5oD65wSvBAemf5BCDL7?p=preview

answered Oct 8, 2014 at 7:42

noypi

99110 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kien Over a year ago

Thanks Noypi, your solution can resolve my problem. Is there any way angularjs can compile charts automatically from template instead of using $compile? Also why do you know $injector.get can get $compile, I was thinking it only get services from modules? Thanks again :)

noypi Over a year ago

Glad to have helped. If you open "docs.angularjs.org/api", at the left side are the default services delivered by the "ng" module. Those services should be available. When I tried the "template" parameter in the directive's definition object, directives I placed there gets compiled when the directive gets compiled.

noypi Over a year ago

ah yes, there is also a $templateCache service, check it out... docs.angularjs.org/api/ng/service/$templateCache

Collectives™ on Stack Overflow

How to load angularjs directive use $injector

1 Answer 1

note that you will be creating multiple injectors here.

whole code

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

note that you will be creating multiple injectors here.

whole code

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related