无法将动态路由从 AngularJS 1.2 转换为 1.6

Question

在 AngularJS 1.2 中，我有一些代码可以动态加载路由和控制器，效果很好。我想升级到 AngularJS 1.6，现在我的动态不再起作用了。

这是我加载 JS 文件并重新计算路线的旧代码（有点简化，因为我有一些有效性验证，但这是基础）：

moduleApp.config(function ($routeProvider, $controllerProvider) {
    moduleApp.controllerProvider = $controllerProvider.register;
    moduleApp.routeProvider = $routeProvider;

    $routeProvider.when('/', {
        templateUrl: 'startpage.html',
        controller: 'startpageController'
    })
    .otherwise({
        resolve: {
            deps: function($q, $rootScope, $location) {
                var deferred = $q.defer();

                var modulename = $location.path().split("/")[1];

                if (modulename !== null) {
                    // Load the JS using https://github.com/ded/script.js (Old but it works :)
                    $script(modulename + ".js", function() {
                        $rootScope.$apply(function() {
                            $rootScope.$broadcast('$locationChangeSuccess', $location.path(), $location.path());
                        });
                    });
                }

                return deferred.promise;
            }
        }
    });
});

正在加载的 JS 文件如下所示：

moduleApp.routeProvider.
    when('/FirstModule', {
        templateUrl: 'FirstModule.html',
        caseInsensitiveMatch: true
    });

moduleApp.controllerProvider('firstModuleController', function ($scope) {
});

同样，这在 1.2 中可以正常工作，但我相信在 1.6 中应用该路线不再以这种方式工作。那么我需要在使用$rootScope 的函数内部进行什么更改才能使其再次工作？还是我还需要改变更多？万一呢？

我用这个代码创建了一个Plunker。

在index.html 中将 AngularJS 版本更改为 1.2.16，以查看它在 1.2 中是否有效（请记住还将链接中的 hashbang 更改为仅 # 而不是 #!）。改回1.6就不行了。

Answer 1

这条线有点奇怪。它让你陷入无限循环。

$rootScope.$broadcast('$locationChangeSuccess', $location.path(), $location.path());

不要试图欺骗 Angular 重新加载，只需调用 $route.reload()

.otherwise({
    resolve: {
        deps: function($q, $rootScope, $location, $http, $route) {
            var deferred = $q.defer();

            var modulename = $location.path().split("/")[1];

            if (modulename !== null) {
                $script(modulename + ".js", function() {
                    $rootScope.$apply(function() {
                        //$rootScope.$broadcast('$locationChangeSuccess', $location.path(), $location.path());
                        $route.reload();
                    });
                });
            }

            return deferred.promise;
        }
    }
});

这里是working Plunker

_{另外，还有一个小错误。 ng-click="FirstButton" 中缺少括号}

 

编辑以回应评论：

广播系统事件 ($locationChangeSuccess) 听起来很冒险。在某种程度上你很幸运它在 1.2 中工作，因为它从未真正得到支持。当然，正如您的代码所声称的那样，位置更改并不成功。

reload 的文档只是说：

即使 $location 没有更改，也会导致 $route 服务重新加载当前路线。 因此，ngView 会创建新的作用域并重新实例化控制器。

所以这应该适用于每个受支持的版本。我预计不会有任何负面影响。这只是您尝试自制的标准方式。