AngularJS injector

Question

Can anyone give a detail example of injector of AngularJS. Here is the code copy from API. "In the following example a new block of HTML containing a ng-controller directive is added to the end of the document body by JQuery. We then compile and link it into the current AngularJS scope."

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<body ng-app="myApp">
</body>
<script>
   angular.module('myApp', []);
var $div = $('<div ng-controller="formController">123</div>');
$('body').append($div);
angular.element(document.body).injector().invoke(function($compile) {
  var scope = angular.element($div).scope();
  $compile($div)(scope);
});

function formController ($scope,$http) {
}
</script>

I copy and paste it in a html page, but it does not work.with error

Uncaught ReferenceError: $ is not defined

UPDATE: I have included jquery, and got a new error:

Uncaught TypeError: Cannot read property 'invoke' of undefined

You need to include jQuery.

Sjoerd222888
– Sjoerd222888

2015-02-25 08:10:01 +00:00
Commented Feb 25, 2015 at 8:10 — Sjoerd222888
– Sjoerd222888, Commented Feb 25, 2015 at 8:10
Have you included jQuery in your project?

Beri
– Beri

2015-02-25 08:10:05 +00:00
Commented Feb 25, 2015 at 8:10 — Beri
– Beri, Commented Feb 25, 2015 at 8:10
Thanks, I modified it, but got a new error msg.

cityCoder
– cityCoder

2015-02-25 08:14:43 +00:00
Commented Feb 25, 2015 at 8:14 — cityCoder
– cityCoder, Commented Feb 25, 2015 at 8:14
include jquery before angularjs

Michael Kang
– Michael Kang

2015-02-25 08:18:46 +00:00
Commented Feb 25, 2015 at 8:18 — Michael Kang
– Michael Kang, Commented Feb 25, 2015 at 8:18
@pixelbits, already changed it, but the error still exists

cityCoder
– cityCoder

2015-02-25 08:22:57 +00:00
Commented Feb 25, 2015 at 8:22 — cityCoder
– cityCoder, Commented Feb 25, 2015 at 8:22

Tom Dalton · Accepted Answer · 2016-08-20 10:28:00Z

1

Create an angular module -- angular.module('myApp', []);
Update the body element to use this module -- <body ng-app="myApp">

Give some time for angular to bootstrap the application.

setTimeout(function () {
    // now you can use the injector.
    var $div = $('<div ng-controller="formController">123</div>');
    $('body').append($div);
    angular.element(document.body).injector().invoke(function($compile) {
        var scope = angular.element($div).scope();
        $compile($div)(scope);
    });
}, 100);

Your example should work with these changes.

edited Aug 20, 2016 at 10:28

Tom Dalton

6,19027 silver badges36 bronze badges

answered Feb 25, 2015 at 8:48

Vinay K

5,5721 gold badge20 silver badges27 bronze badges

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

2 Comments

cityCoder Over a year ago

I have never use AngularJS before. I modified as you said, but it does not work, could you help me check whether my modification is wrong, or there still exist other error

Vinay K Over a year ago

Updated the answer. If it still doesn't work, please increase the timeout provided to the timeout function and try.

Collectives™ on Stack Overflow

AngularJS injector

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related