Question

jQuery ajax请求加载角度应用程序的HTML（来自多个独立的角度应用程序）并将其注入DOM（简化代码）：

$.ajax({
  'url': 'url-to-random-angular-app.html',
  'success': function(data) {
    var content = $(data).find('[data-id]');
    //var content = '<div data-id="5"><div ng-app="MyRandomApp" ng-controller="MyRandomAppController">[...]</div></div>';
    //angular.???.$compile(content);
    $('#container').html(content);
  }
});

我的问题是，角度应用程序不起作用，因为它没有在某处初始化。如何在jQuery成功回调中初始化角度应用程序？

Answer 1

您可以使用以下命令在任何给定时间初始化角度应用

angular.bootstrap(document, ['MyRandomApp']);

另见https://docs.angularjs.org/guide/bootstrap#manual-initialization

Answer 2

Angular.js会自动引导DOMContentLoaded事件。此事件只会被调用一次，因此在将ajax加载的html放入DOM后，Angular不会自动初始化。

The official Angular documentation显示了这种手动调用Angular应用程序引导程序的方法：

angular.bootstrap(document, ['myApp']);

请注意myApp值非常重要。

旁注

我不知道您的项目有多复杂，但您可以通过将所有Angular-apps组合成一个来替换您的Uber-jQuery网站。使用ngRoute或ui-router加载不同的网页。

在jQuery的ajax成功回调中初始化角度应用程序

2 个答案:

旁注