Question

我正在尝试手动引导我的角度应用，以便以我的应用所依赖的异步方式加载一些数据。见article

问题是无论我尝试什么，我都无法使用angular.injector访问工厂的实例。见plunker

问题是我随时运行这样的代码：

var Injector = angular.injector(["MyAPP", "ng"]);
var initService = Injector.get("MyService");

我只是得到了未知的提供程序错误。

有人可以帮助我使这个plunker工作，或指出我更好的方法来创建一个角度应用程序初始化服务。感谢，

Answer 1

已修改：已更新，以反映我们在评论主题中的讨论。

要设置initApp()函数以初始化，使用Promise异步，所需的任何应用程序级别服务，包括工厂（在原始plunker中定义），您只需返回一个Promise，它将在初始注射完成;完成后，调用您的bootstrapApplication()方法在页面上引导Angular。

function initApp() {
  return new Promise(function(resolve, reject) {
        var Injector = angular.injector(["ng","plunker"]);
        Injector.invoke(['factoryTwo', function(factoryTwo) { 
          console.log(factoryTwo.test);
          resolve();
        }]);
  });
}


function bootstrapApplication() {
  angular.element(document).ready(function() {
      angular.bootstrap(document, ["plunker"]);
  });
}  

initApp().then(bootstrapApplication);

这是一个分叉的plunker的链接，上面的代码片段正常工作：http://plnkr.co/edit/764AqLZf6rQHwPZ1RAZc?p=preview

Answer 2

您必须在插入页面

之前引导加载的ajax内容

在将HTML字符串插入DOM之前，需要在HTML字符串上调用$compile，以便angular有机会执行绑定。

在你的小提琴中，它看起来像这样。

$("#dynamicContent").html(
  $compile(
    "<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>"
  )(scope)
);

显然，必须将$compile注入您的控制器才能实现此目的。

在$compile documentation中阅读更多内容。

手动引导角度应用以创建异步应用初始化

2 个答案: