angularjs compile ng-controller and interpolation

Question

On the docs I saw an example of compiling "something" added later.

var $div = $('<div ng-controller="MyCtrl">{{content.label}}</div>');
$(document.body).append($div);

angular.element(document).injector().invoke(function($compile) {
  var scope = angular.element($div).scope();
  $compile($div)(scope);
});

I've added this code on a jquery ready function, but I have two problems:

First is an error: Argument 'MyCtrl' is not a function, got undefined.

The second is that I don't know how to make that content.label works! I've added it to the scope but it doesn't work. How should I call my controller to see working the data binding of content.label?

MY FINAL MODIFIED CODE IS:

var app = angular.module('app',[]);

    $(function(){

        app.controller('MyCtrl',function($scope){
            $scope.content = 123;
        });

        var $div = $('<div ng-controller="MyCtrl">{{content}}</div>');
        $(document.body).append($div);

        angular.element(document).injector().invoke(function($compile) {
          var scope = angular.element($div).scope();
          $compile($div)(scope);
        });

    });

Does your code above have errors? (Such as `$scope.content` isn't defined?) - are you including the JS? — tymeJV, Nov 19 '15 at 14:41
please take a look at the edit. The only error is the one shown above — stackoverflow, Nov 19 '15 at 14:46
You can derive from the html that label is a property of content. ($scope.content.label = "something" or $scope.content = { label : "something" };) — skubski, Nov 19 '15 at 14:48
@skubski have you read my desc? On the docs.... "something" **added later**. I`ve also shared the docs link to see more info "This is fairly rare but could be the case if a third party library is injecting the markup" — stackoverflow, Nov 19 '15 at 15:16
Yeps, you are right. Whenever it is added after the bootstrap or by a third party library a digest/apply needs to be triggered to tell angular that it got changed from outside of its system. — skubski, Nov 19 '15 at 15:44

Alexandr Lazarev · Accepted Answer · 2015-11-19T15:55:08.780

4

UPDATE

You should start a digest cycle after compiling new markup, in order to build all bindings and fire watchers. This can be done by calling scope.$digest(); :

$compile($div)(scope);
scope.$digest();

The result should look like:

var app = angular.module('app',[]);
  app.controller('MyCtrl',function($scope){
      $scope.content = 123;
  });

  angular.element(document).ready(function () {
      var $div = $('<div ng-controller="MyCtrl">{{content}}  </div>');
      $(document.body).append($div);

      angular.element(document).injector().invoke(function($compile) {
        var scope = angular.element($div).scope();
        $compile($div)(scope);
        scope.$digest();
      });

  });

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

edited Nov 19 '15 at 15:55

answered Nov 19 '15 at 15:07

Alexandr Lazarev

12,554
4
38
47

I do have that attribute – stackoverflow Nov 19 '15 at 15:08
Only a $digest (or $apply) needs to be triggered, unless there there is no JQuery library available (or loaded before angular is). Seems to be the correct answer. – skubski Nov 19 '15 at 15:42
I am convinced that in @Barbu Barbu case the error "Argument 'MyCtrl' is not a function, got undefined." beacuse of using jquery `.ready()`. Thanks. – Alexandr Lazarev Nov 19 '15 at 15:49
Oh, yes. The thruth is yours. I will update my answer. Thanks once again! – Alexandr Lazarev Nov 19 '15 at 15:54
with $apply or $disgest, now works! that solved my problem. thanks! – stackoverflow Nov 20 '15 at 07:43
In my case, I am following the same example, however, the code `angular.element(document).injector()` is returning `undefined`, why? – tarekahf Aug 03 '21 at 19:33

angularjs compile ng-controller and interpolation

1 Answers1

Linked