javascript - 检查 AngularJS 模块是否被引导

Question

我有一个带有 ASP.NET 应用程序的 iframe，其中包含 UpdatePanel。我开始在应用程序中使用 Angular，但由于 .NET 回发，一切都无法正常工作。

为了解决这个问题，我使用了这个解决方案:

with (Sys.WebForms.PageRequestManager.getInstance()) {
            add_endRequest(onEndRequest); // regester to the end Request
        }

function onEndRequest(sender, args) {
    angular.bootstrap($('#mainDiv'), ['defaultApp']);
    var rootscope = angular.element('#mainDiv').scope();
    if (rootscope) {
        rootscope.$apply();
    }
}

而且效果很好。

问题是，当我使用另一个 ng-controller 在 ASP.NET 页面中动态加载不同的用户控件时，Angular 会抛出一个错误，指出该应用程序已加载:

App Already Bootstrapped with this Element

所以问题是:如何检查应用程序是否已启动？我可以重新加载这个模块吗？我可以将它从元素中删除然后再次引导它吗？

谢谢。

Answer 1

从应用程序外部访问作用域不是好的做法，因此在构建良好的生产应用程序中未启用它。如果您需要访问/应用范围，那么您的用例有些奇怪/不受支持。

但是，检查元素是否已被引导的正确方法是 Angular 库执行此操作的方式，即加载元素并检查注入(inject)器。所以你想要 angular.element(document.querySelector('#mainDiv')).injector(); 这使得你的代码:

function onEndRequest(sender, args) {
    var element = angular.element(document.querySelector('#mainDiv'));

    //This will be truthy if initialized and falsey otherwise.
    var isInitialized = element.injector();
    if (!isInitialized) {
        angular.bootstrap(element, ['defaultApp']);
    }

    // Can't get at scope, and you shouldn't be doing so anyway
}

您能告诉我们为什么需要应用范围吗？