使用 jquery 将 DOM 附加到 html 后初始化控制器答案

【问题标题】：Initialize controller after appending DOM into a html using jquery使用 jquery 将 DOM 附加到 html 后初始化控制器
【发布时间】：2015-10-27 06:39:27
【问题描述】：

我正在使用 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/

【问题讨论】：

标签： jquery angularjs dom dependency-injection

【解决方案1】：

对于延迟加载 Angular 应用程序，您应该使用 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

【讨论】：