无法在角度UI-Router中加载父路由

时间:2014-10-31 17:16:16

标签: angularjs angular-ui-router

在我的应用程序中,我有一些主要模块,每个模块都有侧边栏 如果我单击侧边栏项目然后它将路由到侧边栏链接页面,但如果我再次单击标题,那么我无法查看我的父路径页面。
我已在此plnkr中列出了我的问题 重现的步骤:

  1. 默认选择route1,并且可以在视图中使用仪表板。单击Item1。
  2. 现在点击route1:无法看到仪表板视图。
  3.   
      <script>
        var myapp = angular.module('myapp', ["ui.router"])
         myapp.config(function($stateProvider, $urlRouterProvider) {
    
          // For any unmatched url, send to /route1
          $urlRouterProvider.otherwise("/route1")
    
          $stateProvider
            .state('route1', {
              url: "/route1",
              templateUrl: "route1.html",
              controller: function($scope, $state) {
                $scope.items = ["item1", "item2"];
                $state.go('route1.dashboard');
              }
            })
            .state('route1.dashboard', {
              url: "/dashboard",
              templateUrl: "dashboard.html"
            })
            .state('route1.item1', {
              url: "/item1",
              templateUrl: "item1.html"
            })
            .state('route1.item2', {
              url: "/item2",
              templateUrl: "item2.html"
            })
    
          .state('route2', {
            url: "/route2",
              templateUrl: "route1.html",
              controller: function($scope, $state) {
                $scope.items = ["item3", "item4"];
                $state.go('route2.dashboard');
              }
          })
            .state('route2.dashboard', {
              url: "/dashboard",
              templateUrl: "dashboard.html"
            })
            .state('route2.item3', {
              url: "/item3",
              templateUrl: "item3.html"
            })
            .state('route2.item4', {
              url: "/item4",
              templateUrl: "item4.html"
            })
    
        })
      </script>
    

1 个答案:

答案 0 :(得分:1)

您在route1控制器中拥有的代码仅在实例化时运行。因此,在您从item1内部重新访问它之后,它不需要重新加载并且$ state.go()不会触发。

我已经用另一种潜在的方法分叉了你的傻瓜:http://plnkr.co/edit/7stMErnkb3rzPJD0Gj5x?p=preview

你应该将仪表板内容放在route1模板中,而不是试图通过$ state.go()

转发它。

所以,你的route1.html来自之前的

的ui-view语句
<div ui-view></div>

  <div ui-view>
    <h1>Dashboard</h1>
  </div>

现在您不需要仪表板部分,并且每次都会加载。只要这些状态激活,item1 / item2 partials将替换ui-view中的内容。

请注意更新的Plunker中Route1如何工作,而Route2仍然不起作用(因为它仍然有以前的$ state.go()方法)。