使用jquery將DOM附加到html後初始化控制器

Question

我正在使用jquery在DOM中附加html。該html包含具有控制器及其變量綁定的角度語法。但是一旦添加了html，控制器內初始化的變量就不會填充它們的值，而是將其打印爲{{ greeting }}。

JS：

$("#clickDiv").click(function(){ 
    var htmlStr = "<div ng-app='myapp'>"+ 
     "<div ng-controller='mainController'>"+ 
      "<div>{{ greeting.text }}</div>"+ 
      "<div>{{ val }}</div>"+ 
     "</div>"+ 
    "</div>"; 
    $("#right").html($compile(htmlStr)); 

}); 

var app = angular.module("myapp", []); 
app.controller('mainController', ['$scope', '$compile', function($scope, $compile) { 
    $scope.greeting = { text: 'Hello' }; 
    $scope.val = 123; 
}]); 

在上面的代碼我收到錯誤 - $compile is not defined。

的jsfiddle：http://jsfiddle.net/ashwyn/7v6t6cqm/

Answer 1

對於延遲加載應用程序的角度，你應該angular.bootstrap代替ng-app

$("#clickDiv").click(function(){ 
    var htmlStr = "<div id='myApp'>"+ 
     "<div ng-controller='mainController'>"+ 
      "<div>{{ greeting.text }}</div>"+ 
      "<div>{{ val }}</div>"+ 
     "</div>"+ 
    "</div>"; 
    $('#right').html(htmlStr) 
    angular.bootstrap($('#myApp'), ['myapp']) 
}); 

看this answer太會給你簡短的想法。

Fiddle