Question

我有一种情况，我想要触发基于角色的小部件 iff 当前网址中存在查询arg。我的方法是检查（在页面加载时）是否存在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重新扫描页面中的指令？

Answer 1

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

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

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

Answer 2

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

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

此处有更多信息：angular docs

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

2 个答案: