angularjsコントローラと補間をコンパイルする

Question

オンthe docs私は後で「何か」をコンパイルする例を見ました。

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のレディ機能のこのコードを追加しましたが、私は二つの問題があります。

まずエラーです： Argument 'MyCtrl' is not a function, got undefined。

第二は、私はそれを作る方法がわからないということですcontent.label作品！私はscopeに追加しましたが、動作しません。 content.labelのデータバインディングの動作を確認するためにコントローラをどのように呼び出す必要がありますか？

MY FINAL変更したコードは次のとおりです。

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

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