是否可以替换/覆盖ui-router状态定义? (默认状态由另一个模块“定制”)

时间:2015-08-26 19:16:29

标签: angularjs angular-ui-router

是否可以简单地用新的状态定义替换状态定义?

我的用例是一个模块定义了状态,我希望能够从不同的模块中替换该状态定义。基本上,初始定义是一个“默认”定义,我希望有可能从不同的模块定制状态。

我意识到在配置时执行此操作可能会导致模块首先定义它的竞争条件。我研究了在运行时进行此操作的可能性,但无法使其正常工作。

我可以通过创建全新的状态来完成我想要的任务,但我想使用原始状态中的相同URL。

修改

进一步澄清我想要完成的事情...... 请考虑以下代码:

angular.module('module1', ['ui.router'])
.config(['$stateProvider', function($stateProvider){
    $stateProvider
        .state('root', {
            url: '',
            abstract: true,
            template: '<div class="layout sub" ui-view="sub"></div>'
        })
        .state('root.sub1', {
            url: '/sub1',
            views: {
                'sub@root': {
                    template: '<p>Default sub state 1</p>'
                }
            }
        });
}]);

angular.module('module2', ['ui.router'])
.config(['$stateProvider', function($stateProvider){
    $stateProvider
        .state('root.sub1', {
            url: '/sub2',
            views: {
                'sub@root': {
                    template: '<p>Customized sub state 1</p>'
                }
            }
        });
}]);

当然这给出了“错误:状态'root.sub1''已经定义了”

3 个答案:

答案 0 :(得分:6)

好的,所以当我整理一个我接下来试过的plnkr演示时,我发现如果你使用$ state.get并更新它,它确实有效。

angular.module('module2', ['ui.router'])
.run(['$state', function($state){
  var state = $state.get('root.sub1');
  if(state && state.views && state.views['sub@root']){
    state.views['sub@root'].template = '<p>Customized sub state 1</p>';
  }
}]);

Plnkr:http://plnkr.co/edit/xLdCgjeM33z2Hf5CHfZR

修改

我发现它在我的应用中没有工作,因为我没有定义我想在原始状态下覆盖的视图。

示例(不起作用):

angular.module('module1', ['ui.router'])
.config(['$stateProvider', function($stateProvider){
    $stateProvider
        .state('root', {
            url: '',
            abstract: true,
            template: '<div class="layout sub" ui-view="sub"></div>'
        })
        .state('root.sub1', {
            url: '/sub1',
            views: {
            }
        });
}]);

angular.module('module2', ['ui.router'])
.run(['$state', function($state){
    var state = $state.get('root.sub1');
    if(state && state.views){
        state.views['sub@root'] = { template: '<p>Customized sub state 1</p>' };
    }
}]);

答案 1 :(得分:1)

我发现解决这个问题的最佳方法是:

  1. 创建一个&#39; root&#39;控制器(即在其他状态之前加载的状态)
  2.   

    .state(&#39; root&#39;,{url:&#39;:/ root_path&#39;,控制器:&#39; rootController&#39; ..其他东西在这里})

    1. 在rootController中,您决定如何处理路由:
    2.   

      db.call(pull-root-key-from-db).then(function(root_response){       if(root_response.type ==&#34; user&#34;){         $ state.go(&#34; user.dashboard&#34;)})

      很抱歉格式化,我是移动设备:)

答案 2 :(得分:1)

似乎没有办法覆盖它&lt; v1,除非你需要重写stateProvider的装饰器。

对于v1,有一个新方法取消注册用于此目的 https://github.com/angular-ui/ui-router/commit/44579ecbafe15ad587dc341ba4a80af78b62bdaa

我尝试使用$ state.get(view)并覆盖该值,但控制器和模板未正确注册,因为内置装饰器使用stateBuilder属性来生成控制器和模板。

检查https://github.com/angular-ui/ui-router/blob/0.3.2/src/state.js