AngularJS - UI路由器 - 以编程方式添加状态

Question

有没有办法在模块配置后以编程方式将状态添加到$ stateProvider,例如服务？

要为这个问题添加更多上下文,我有一种情况可以采用两种方法:

1. 尝试强制重新加载模块配置中定义的状态,问题是状态有一个reloadOnSearch设置为false,所以当我尝试$ state.go('state.name',{new:param},{reload:真正}); 没有任何反应,任何想法？

国家定义

.state('index.resource.view', {
  url: "/:resourceName/view?pageNumber&pageSize&orderBy&search",
  templateUrl: "/resourceAdministration/views/view.html",
  controller: "resourceViewCtrl",
  reloadOnSearch: false,
})

2. 尝试以编程方式添加我需要从服务加载的状态,以便路由可以正常工作.如果可能的话,我宁愿选择第一个选项.

Answer 1

有关更新信息,请参阅-edit-

通常情况是$stateProvider在配置阶段添加到状态.如果要在运行时添加状态,则需要保留对$stateProvider周围的引用.

此代码未经测试,但应该执行您想要的操作.它创建了一个名为的服务runtimeStates.您可以将其注入运行时代码,然后添加状态.

// config-time dependencies can be injected here at .provider() declaration
myapp.provider('runtimeStates', function runtimeStates($stateProvider) {
  // runtime dependencies for the service can be injected here, at the provider.$get() function.
  this.$get = function($q, $timeout, $state) { // for example
    return { 
      addState: function(name, state) { 
        $stateProvider.state(name, state);
      }
    }
  }
});

我已经在UI-Router Extras中实现了一些名为Future States的东西,它们可以解决一些极端情况,比如将url映射到尚不存在的状态.Future States还展示了如何延迟加载运行时状态的源代码.查看源代码,了解所涉及的内容.

-edit-用于UI-Router 1.0+

在UI-Router 1.0中,可以使用StateRegistry.register和在运行时注册和注销状态StateRegistry.deregister.

要访问StateRegistry,请将其$stateRegistry注入,或$uiRouter通过注入和访问它UIRouter.stateRegistry.

UI-Router 1.0还包括开箱即用的Future States,它处理状态定义的延迟加载,甚至可以通过URL进行同步.

Answer 2

克里斯T钉了它!提供者是要走的路.您不必将其打到窗口对象上,保护程序,更受保护等.

通过本文交叉引用他的答案确实有帮助:http://blog.xebia.com/2013/09/01/differences-between-providers-in-angularjs/#provider

该解决方案在配置块期间使特定模块$ stateProvider在其运行块期间可供其他模块访问.

在我的情况下,我根据用户的权限动态生成仪表板状态.

在我的配置块期间,我的提供程序已设置,传递模块的stateProvider(稍后将被访问).

//in dashboard.module.js

var dashboardModule = angular.module('app.modules.dashboard',[
        'app.modules.dashboard.controllers',
        'app.modules.dashboard.services',
        'app.modules.dashboard.presentations.mileage'
    ])

    .provider('$dashboardState', function($stateProvider){
        this.$get = function(PATHS, $state){
            return {
                addState: function(title, controllerAs, templatePrefix) {
                    $stateProvider.state('dashboard.' + title, {
                        url: '/' + title,
                        views: {
                            'dashboardModule@dashboard': {
                                templateUrl: PATHS.DASHBOARD + (templatePrefix ? templatePrefix + '/' : '/') + title + '/' + title + '.view.html',
                                controller: controllerAs ? controllerAs : null
                            }
                        }
                    });
                }
            }
        }
    });

这将使我的Dashboard状态提供程序可用于其他模块,而不是将其打到窗口上.

然后在我的用户模块的运行块(控制器)中,我可以访问仪表板的状态提供程序并动态注入状态.

var UserControllers = angular.module('app.modules.user.controllers', [])

.controller("UserLoginController", ["$state", "$dashboardState", function($state, $dashboardState){

    $dashboardState.addState('faq', null, 'content');

    $state.go('dashboard.faq');

}]);

Answer 3

是的，可以这样做，但是因为涉及缓存层，所以很复杂。Alex Feinberg 在他的博客上记录了一个解决方案：

http://alexfeinberg.wordpress.com/2014/03/08/dynamically-populating-angular-ui-router-states-from-a-service/

文章最后包含了一个使用 stateProvider 创建状态的例子：

app.stateProvider.state(ent.lob.name.toLowerCase(), {
    url: '/' + ent.lob.name.toLowerCase(),
    controller: ent.lob.name.toLowerCase() + 'Controller',
    templateUrl: 'lobs/views/' + ent.lob.name.toLowerCase() + '.html'
});