Question

我希望将AngularJS网络应用程序集成到许多网站中。我希望能够为每个网站管理员提供HTML代码，例如：

<div id='angular-integration-app'></div><script src="widget.js"></script>

将此HTML代码插入网站后，网站应加载AngularJS并插入AngularJS应用程序作为标记为“angular-integration-app”ID的元素的子元素。

This Plunker has an implementation，但此实施无效。它间歇性地失败，错误为：

Uncaught ReferenceError: angular is not defined  application.js:1
Uncaught Error: [$injector:modulerr]  angular.js:38

我注意到它通常在第一次加载时工作正常，但是当按下浏览器刷新按钮时，它经常会失败。当它不是通过Plunker托管时尤其如此。

请告知有关创建动态AngularJS应用程序集成的最佳方法，该集成始终有效。

Answer 1

这种不一致的行为是因为有时页面被缓存并且代码同步执行，有时则不会。

要解决此问题，您需要等待角度准备就绪，然后声明您的模块，然后使用您的模块引导文档。如果执行引导，则不能在HTML中使用ng-app＆＃34;之后＆＃34; （异步，超出角度背景）。我已做出更改以告诉您应该如何：

var element = document.querySelector('#angular-integration-app');
angular.element(element).ready(function() {

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

  app.directive('customForm', function() {
    return {
      restrict: 'A',
      template: 'hello world'
    };
  });

  angular.bootstrap(element, ['myapp']);
});

http://plnkr.co/edit/7KbD1Okwx0MwhDIJXIGE?p=preview

或者，如果你不想让角度陷入你的目标html（如果他自己使用另一个版本的angularjs会发生什么？），你可以创建一个iFrame来隔离你的角度，风格和代码。

Answer 2

code in this Plunker似乎解决了这个问题。我现在将AngularJS添加为head元素的子元素（名为“script”的变量），并且不要修改DIV或加载AngularJS应用程序直到“script.onload”。我也将floribon的帖子中的一些想法融入了这个Plunker中。

script.onload = function() {
  // code here
};

动态加载的AngularJS应用程序

2 个答案: