页面加载后如何添加 ng-app？答案

【问题标题】：How to add ng-app after page load?页面加载后如何添加 ng-app？
【发布时间】：2014-10-16 20:22:21
【问题描述】：

我遇到了一种情况，我想触发一个基于 Angular 的小部件 iff 查询 arg 存在于当前 URL 中。我的方法是（在页面加载时）检查 arg 是否存在，如果存在，则在 <body> 上附加一些标记，这将使应用程序滚动：

var exampleApp = angular.module('exampleApp', []);

//init
$(function() {

  var widgetMarkup = "<div ng-app=\"exampleApp\"><div ng-include=\"'/partials/widget.html'\"></div></div>";

  if (window.location.href.indexOf('?arg') > -1) {
    $(document.body).append(widgetMarkup);
  }

});

问题：标记已添加到 DOM，但没有任何效果。 但是，如果我将相同的标记添加到原始 HTML 文件，应用程序会被拾取并呈现部分内容。我需要告诉 Angular 重新扫描页面中的指令吗？

【问题讨论】：

docs.angularjs.org/guide/bootstrap#manual-initialization

标签： javascript jquery html angularjs

【解决方案1】：

你想要的是angular.bootstrap。当你的 DOM 准备好并且所有内容都已附加时调用它。

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

这将在文档上以角度开始，就好像它上面有ng-app。你可以将它引导到你想要的任何元素。

【讨论】：

【解决方案2】：

您必须手动引导您的应用程序。

var exampleApp = angular.module('exampleApp', []);
  if (window.location.href.indexOf('?arg') > -1) {
    angular.element(document).ready(function() {
      angular.bootstrap(document, ['exampleApp']);
    });
  }

更多信息在这里：angular docs

【讨论】：