Question

我有一个场景需要动态加载Angular JS应用程序。我已将代码基于此： -

https://stackoverflow.com/a/15252490/1545858

现在，我的代码对于角度js 1.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']);
});

这是HTML： -

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

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

  </div>
</div>

现在，如果你使用角度js 1.1.5开始并销毁并再次启动，一切正常，但在角度js 1.2.1中，它在第二次启动时不起作用。有关如何在1.2.1中使其工作的任何想法？

这是js小提琴： -

http://jsfiddle.net/Y9wj2/

Answer 1

正如 charlietfl 所说，你不需要多次引导。实际上，使用angular.js 1.2.1时，生成的错误会破坏所有内容，这正好告诉您：

[ng：btstrpd] App已经使用此元素“
启动了

你应该仔细考虑是否真的需要这个控制器是动态的。如果您可以使用ng-include之类的内容来加载额外的内容，那么您将有更轻松的时间，无需担心编译内容。

如果您发现确实需要使用此HTML并从角度上下文之外加载它，那么您可以使用$compile服务。首先在某处将应用引导至，最好使用ng-app并抓住注入器。

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

或

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

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

现在您可以随意插入HTML，然后使用

进行编译和链接

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

在角度JS 1.2中加载和销毁的最佳方法

1 个答案: