使用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