子状态不等待父解决

Question

我有一个父状态，它在其解析中加载了一个 JavaScript 文件（比如 abc.js）。所有子状态的控制器都在该 abc.js 文件中定义。所以很明显，我希望在父级完成加载后解析所有子状态 abc.js。请在下面找到我的代码片段 -

    .state('parent', {
        url: '/role',
        templateUrl: 'something.tmpl.html',
        resolve: {
            loadRoleScript: function() {
                var injector = angular.injector(['ng']),
                    q = injector.get('$q'),
                    deferred = q.defer(),
                    scriptTag = '';

                scriptTag = document.createElement('script');
                scriptTag.type = 'text/javascript';
                scriptTag.src = 'path/to/js/file/abc.js';
                scriptTag.onload = scriptTag.onreadystatechange = function(_, isAbort) {
                    if (!scriptTag.readyState || /loaded|complete/.test(scriptTag.readyState)) {
                        if (isAbort) {
                            deferred.reject();
                        } else {
                            setTimeout(function() {
                                // Here goes some of my logic
                                console.log('Parent resolved');
                                deferred.resolve();
                            }, 100);
                        }
                    }
                };
                scriptTag.onerror = function() {
                    deferred.reject();
                };
                document.body.appendChild(scriptTag);
            }
        }
    })
    .state('parent.dashboard', {
        url: '/roledashboard',
        controller: 'RoleHomeCtrl',
        templateUrl: 'something/child.tmpl.html',
        resolve: {
            dependent1: ['loadRoleScript', function(loadRoleScript) {
                console.log('child getting loaded before parent is resolved');
            }]
        }
    });

我在控制台上得到的输出 -

在解析父项之前加载子项。

家长已解决。

我关注了多个这样的链接 - https://github.com/angular-ui/ui-router/issues/1903 但是到处都建议的解决方案对我不起作用。

$ocLazyLoad 也是一个选项，但尝试自己实现。

提前致谢！

Answer 1

我认为你需要将你的代码修改成这样：

 .state('parent', {
        url: '/role',
        templateUrl: 'something.tmpl.html',
        resolve: {
            loadRoleScript: function() {
                var injector = angular.injector(['ng']),
                    q = injector.get('$q'),
                    deferred = q.defer(),
                    scriptTag = '';

                scriptTag = document.createElement('script');
                scriptTag.type = 'text/javascript';
                scriptTag.src = 'path/to/js/file/abc.js';
                scriptTag.onload = scriptTag.onreadystatechange = function(_, isAbort) {
                    if (!scriptTag.readyState || /loaded|complete/.test(scriptTag.readyState)) {
                        if (isAbort) {
                            deferred.reject();
                        } else {
                            setTimeout(function() {
                                // Here goes some of my logic
                                console.log('Parent resolved');
                                deferred.resolve();
                            }, 100);
                        }
                    }
                };
                scriptTag.onerror = function() {
                    deferred.reject();
                };
                document.body.appendChild(scriptTag);
                // !!
                // !!
                return deferred.promise;
                // !!
                // !!

            }
        }
    })
 .state('dashboard', {
        parent:'parent',
        url: '/roledashboard',
        controller: 'RoleHomeCtrl',
        templateUrl: 'something/child.tmpl.html',
        resolve: {
            dependent1: function(loadRoleScript) {
                console.log('child getting loaded before parent is resolved');
            }
        }
    });

那么应该正确解析父状态

子状态不等待父解决

Child state not waiting from parent resolve

javascript

angularjs

lazy-loading

resolve