如何在ui-router中设置具有解析和嵌套状态的父/子？

我试图重构我们当前的布局，以在页面上的标题上方添加动态显示/隐藏部分。我们使用ui-router使用Angularjs 1.4.2，目前我们正在使用单独的路由文件，尽管我们有一个主要路由。到目前为止，屏幕的main.html部分是动态内容的唯一部分。为了让我的新路线起作用，我不得不将它添加到每条现有路线中。如何在ui-router中设置具有解析和嵌套状态的父/子？

我的问题是，一个更好的设计是沿着这条单行父路线来处理决议，动态主内容的嵌套状态和我的新路线和内容的新视图？随着应用程序的增长，您是否仍然继续将新路线放入父路线中，还是有更好的方法来组织它，就像我们对单个路线文件或两者的组合一样？

这就是我想要的，但它不工作还没有，因为我得到一个空白页，但设计与应用未来的发展是什么，我试图让这里：

(function() { 
    'use strict'; 

    angular 
     .module('myApp') 
     .config(config); 

    config.$inject = ['$stateProvider']; 
    /* @ngInject */ 
    function config($stateProvider) { 
     $stateProvider 
      .state('root', { 
       template: '<ui-view></ui-view>', 
       abstract: true, 
       resolve:{ 
        myLoader: ['myLoader', function(myLoader){ 
         // $http returns a promise for the url data 
         return myLoader.load(); 
        }] 
       } 
      } 
      .state('main'), { 
       url: '/?param1&param2&param3&param4', 
       templateUrl: 'app/routes/main/main.html', 
       controller: 'MainCtrl', 
       redirectTo: 'main' 
      }) 
      $stateProvider 
      .state('basicsearch', { 
       url: '/basic-search', 
       templateUrl: 'app/routes/basicsearch/basicsearch.html', 
       controller: 'searchQuickCtrl' 
      }) 
      $stateProvider 
      .state('advancedsearch', { 
       url: '/advaned-search', 
       templateUrl: 'app/routes/advancedsearch/advancedsearch.html', 
       controller: 'advancedSearchkCtrl' 
      }) 
      $stateProvider 
      .state('anothersearch', { 
       url: '/another-search', 
       templateUrl: 'app/routes/anothersearch/anothersearch.html', 
       controller: 'anotherSearchCtrl' 
      }) 
      .state('myChange', { 
       url: '/myChange?param5&param6&param7&param8', 
       views: { 
        "myChangeView": { 
         templateUrl: '/app/routes/myChange/myChange.html', 
         controller: 'myChangeCtrl' 
        } 
       } 

      }); 
    } 
})();

这里是什么，我们有一个基本的布局：

来源

2015-11-07 James Drinkard

你能创建一个plunker？目前还不清楚什么不适合你。 UI-Router在最后并不复杂...... –

也许不适合你，但我是新手！让我尝试。 –

我可以协助，但不知道你想要去哪个方向... –

我不知道的问题。但我created working plunker，向您展示我们如何使用状态嵌套和解决方案。

因此，这是我们的根状态父控制器和决心使用的工厂

.factory('myLoader', function(){ 
    return { 
    load: function() {return [1,2] } 
    }; 
}) 
.controller('ParenCtrl', ['$scope', 'myLoader', function ($scope, myLoader) { 
    $scope.myLoader = myLoader; 
}]) 
.controller('MainCtrl', ['$scope', 'myLoader', function ($scope, myLoader) {}]) 
.controller('searchQuickCtrl', ['$scope', 'myLoader', function ($scope, myLoader) {}]) 
.controller('advancedSearchkCtrl', ['$scope', 'myLoader', function ($scope, myLoader) {}]) 
.controller('anotherSearchCtrl', ['$scope', function ($scope) {}])

接下来，我们将使用控制器抽象根状态，分配结果转换成范围：

.state('root', { 
    template: '<div ui-view></div>', 
    abstract: true, 
    controller: 'ParenCtrl', 
    resolve:{ 
     myLoader: ['myLoader', function(myLoader){ 
      // $http returns a promise for the url data 
      return myLoader.load(); 
     }] 
    } 
})

并且所有州将使用它作为它们的父代，并继承范围：

.state('main', { 
    parent: 'root', 
    url: '/?param1&param2&param3&param4', 
    templateUrl: 'app/routes/main/main.html', 
    controller: 'MainCtrl', 
    //redirectTo: 'main' 
}) 

.state('basicsearch', { 
    url: '/basic-search', 
    templateUrl: 'app/routes/basicsearch/basicsearch.html', 
    parent: 'root', 
    controller: 'searchQuickCtrl' 
}) 

.state('advancedsearch', { 
    url: '/advaned-search', 
    templateUrl: 'app/routes/advancedsearch/advancedsearch.html', 
    parent: 'root', 
    controller: 'advancedSearchkCtrl' 
}) 

.state('anothersearch', { 
    url: '/another-search', 
    parent: 'root', 
    templateUrl: 'app/routes/anothersearch/anothersearch.html', 
    controller: 'anotherSearchCtrl' 
})

正确地使用它这个观点的内部：

<div > 
    <h3>current state name: <var>{{$state.current.name}}</var></h3> 

    <h4>resolved in parent</h4> 
    <pre>{{myLoader | json }}</pre> 

    <h5>params</h5> 
    <pre>{{$stateParams | json}}</pre> 
    <h5>state</h5> 
    <pre>{{$state.current | json}}</pre> 

</div>

而所有这些控制器不使用该解决的价值

.controller('MainCtrl', ['$scope', 'myLoader', function ($scope, myLoader) {}]) 
.controller('searchQuickCtrl', ['$scope', 'myLoader', function ($scope, myLoader) {}]) 
.controller('advancedSearchkCtrl', ['$scope', 'myLoader', function ($scope, myLoader) {}]) 
.controller('anotherSearchCtrl', ['$scope', function ($scope) {}])

所以，每个控制器可以提供的东西，在母公司进行解析（参数）。如上所示。但是，因为父母已经使用过，并将其分配给某个$ scope变量......所有的都已经到位了。

同时检查：

来源

2015-11-07 15:59:59

是的，解决方案和嵌套是我有麻烦，以及正确的设计。谢谢！ –

詹姆斯，很高兴见到;）享受惊人的lib UI-Router;） –

如何在ui-router中设置具有解析和嵌套状态的父/子？

回答

相关问题