检查AngularJS模块是否已启动



我有一个带有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控制器在ASP.NET页面中动态加载不同的用户控件时,Angular会抛出一个错误,说应用程序已经加载:

App Already Bootstrapped with this Element

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

谢谢。

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

然而,检查元素是否已启动的正确方法是Angular库执行此操作的方式,即加载元素并检查是否有注入器。所以你想要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
}

你能告诉我们为什么你需要应用这个范围吗?

您可以简单地检查mainDiv的作用域,如果angular.element(document.querySelector('#mainDiv')).scope()不是undefined,则意味着angular尚未初始化。

您的代码如下所示。

代码

function onEndRequest(sender, args) {
    //below flag will be undefined if app has not bootsrap by angular.
    var doesAppInitialized = angular.element(document.querySelector('#mainDiv')).scope();
    if (angular.isUndefined(doesAppInitialized)) //if it is not 
        angular.bootstrap($('#mainDiv'), ['defaultApp']);
    var rootscope = angular.element('#mainDiv').scope();
    if (rootscope) {
        rootscope.$apply(); //I don't know why you are applying a scope.this may cause an issue
    }
}

更新

在angular 1.3+于2015年8月晚些时候发布后,它通过禁用调试信息来禁用调试信息,从而增加了与性能相关的改进。因此,通常我们应该将debuginfo选项启用为false,以便在生产环境中获得良好的性能改进。我不想写太多关于它的文章,因为它已经被@AdamMcCormick的答案覆盖了,这真的很酷。

相关内容

  • 没有找到相关文章

最新更新