Angularjs angular JS 1.2中加载和销毁的最佳方式

我有一个场景，需要动态加载Angular JS应用程序。我的代码基于以下内容：-

现在，我的代码在AngularJS1.1.5中运行得非常好，但在1.2.1中，没有这样的运气

以下是JS代码：-

$("#startMeUp").click(function() {
// Make module Foo
angular.module('Foo', []);
// Make controller Ctrl in module Foo
angular.module('Foo').controller('Ctrl', function($scope) { 
    $scope.data = {};
    $scope.data.name = 'KDawg';
    $scope.destroy = function() {
        $scope.$destroy();
        $('#Ctrl').remove();
    };
    $scope.$on("$destroy", function () {
        console.log("EXTERMINATE");
    });
});
// Load an element that uses controller Ctrl
$('<div ng-controller="Ctrl" id="Ctrl"> ' +
  '<input type="text" ng-model="data.name"></input>' +
  '{{data.name}}' +
  '<button ng-click="destroy()">Destroy Me</button></div>').appendTo('#container');
// Bootstrap with Foo
angular.bootstrap($('#Foo'), ['Foo']);
});

$（“#启动菜单”）。单击（函数（）{
//使模块成为Foo
角模（'Foo'，[]）；
//使控制器在模块Foo中按Ctrl键
角度.module（'Foo'）.controller（'Ctrl'，function（$scope）{
$scope.data={}；
$scope.data.name='KDawg'；
$scope.destroy=函数（）{
$scope.$destroy（）；
$（'#Ctrl'）。删除（）；
};
$scope.$on（“$destroy”，函数（）{
控制台日志（“清除”）；
});
});
//加载使用控制器Ctrl的元素
$(' ' +
'' +
“{data.name}”+
“摧毁我”）。附加到（“#容器”）；
//Foo引导
引导（$（'Foo'），['Foo']）；
});

以下是HTML：-

<button id="startMeUp">Start Me Up!</button>

<div id="Foo">
  <div id="container">

  </div>
</div>

启动我！

现在，如果您使用angular js 1.1.5启动、销毁并再次启动，一切都正常，但在angular js 1.2.1中，它在第二次启动时不起作用。有没有想过如何让它在1.2.1中工作

以下是js小提琴：-

---

正如charlietfl所说，您不需要多次引导。事实上，使用angular.js 1.2.1，生成的错误会破坏一切，并准确地告诉您：

[ng:btstrpd]应用程序已使用此元素“”启动

您应该仔细考虑是否真的需要这个控制器是动态的。如果您可以使用

ng include

之类的工具来加载额外的内容，那么您将有一个更轻松的时间，无需担心编译内容

如果您发现确实需要从angular上下文之外加载此HTML，则可以使用

$compile

服务。首先在某个地方引导应用程序一次，最好使用

ng-app

，然后抓住注射器

var injector = angular.bootstrap($('#Foo'), ['Foo']);

或

---

如果您在页面中启动了一次SRAP angular，为什么需要再次启动？销毁一个控制器作用域并不是销毁模块或模块的绑定我试图实现的是angular js与现有页面和表单的集成。基本上，在案例a、B和C中，表单将启动一个简单的旧提交，但D和E使用角度。所以我想如果我破坏或创建控制器，那可能是最好的方法。仔细考虑一下，我认为如果我更新/创建一个对象并使用angular的事件总线将此信息传递给angular可能会更好。我想我会进一步调查，如果有问题，我可能会问另一个问题。谢谢

<div id="Foo" ng-app="Foo"></div>

var injector = $('#Foo').injector();

injector.invoke(['$compile', '$rootScope', function($compile, $rootScope) {
  $compile(insertedJqLiteNode)($rootScope);
});