angularjs 编译 ng-controller 和插值

On the docs https://docs.angularjs.org/api/ng/function/angular.injector我看到了一个后来添加的编译“东西”的例子。

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);
});

我已经添加thisjquery 就绪函数上的代码，但我有两个问题：

首先是一个错误：Argument 'MyCtrl' is not a function, got undefined.

第二个是我不知道如何做到这一点content.label作品！我已将其添加到scope但它不起作用。我应该如何调用我的控制器来查看数据绑定的工作content.label?

我最终修改后的代码是：

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);
        });

    });

UPDATE

您应该在编译新标记后启动摘要周期，以便构建所有绑定和火灾观察者。这可以通过调用来完成scope.$digest(); :

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

结果应该如下所示：

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 http://plnkr.co/edit/dDNBxf8SowKTPgnVj0tF?p=preview