angularjs編譯ng-controller和插值

Question

在文檔上，我看到了稍后添加的“東西”編譯示例。

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

我已經在jQuery ready函數上添加了此代碼，但是我有兩個問題：

首先是一個錯誤： 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);
        });

    });

Answer 1

更新

您應在編譯新的標記后開始摘要循環，以構建所有綁定和消防員。 這可以通過調用scope.$digest();來完成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=預覽