AngularJS-UI-路由器：父級的解析不會從子級觸發

Question

在我的angularjs應用程序中，我有angular-ui-bootstrap選項卡，在選擇選項卡時，我使用$ state.go更改為不同的狀態，並在瀏覽器更改時使用狀態轉換網址。

我有指向$ state：home.summary的父靜態選項卡，而有指向$ state：home.summary.detail的動態選項卡。 當我從父級轉到子級時，會觸發子級解析方法，但是當我從子級轉到父級時，父級解析不會觸發

狀態會發生變化，URL會發生變化，但不會解析父項解析，而是保持原樣。

Routes.js

 .state('home', {
          abstract: true,            
          url: '/home',
          templateUrl: 'scripts/home.html'
   })
.state('home.summary', {
url: '/summary', 
controller: 'SummaryCtrl',                
views: {               
       'summary': 
          {
                    templateUrl: "scripts/home/summary.html",
                    resolve: {
                     load: function ($rootScope,$stateParams,ServiceA) {
                        ServiceA.get().$promise;
                     }
                    }
          }
       }
})
.state('home.summary.detail', {
url: '/detail/:id',
controller:'DetailCtrl',                 
views: {               
       'detail': 
          {
                   templateUrl: "scripts/home/detail.html",
                   resolve: {
                     load: function ($rootScope,$stateParams,ServiceB,$timeout) {
                       var promise=ServiceB.retrieve(id);
                       return promise;
                     }
                    }
          }
       }
}) 

Tabs.html

  <div ng-controller="TabsCtrl">
  <ul tabset>
  <li tab select="selectStaticTab()">
   <span tab-heading>Search<a style="left:9px" class="glyphicon glyphicon-search"></a>         </span>       
         <div class="well">  
             <div ui-view="summary"></div>    
         </div> 
   </li>
    <li tab ng-repeat="tab in tabs track by tab.id"  active="tab.active"     select="tab.select()"> 
     <span tab-heading>{{tab.title}}</span>
         <div ui-view="detail"></div>
   </li>
  </ul>   
  </div>

為什么未從子狀態解雇父母決心？？？ 任何幫助將不勝感激。

謝謝

Answer 1

您的草稿有很多問題，我試圖讓它們都在這里工作

1）首先，我們正在使用ui-router因此我們不能使用<div ng-controller="TabsCtrl"> 。 我們確實有一定的狀態 ，現在，每個國家可以有更多的意見 ，這的確有其自己的controllrs（即控制器屬於查看狀態beeing部分）

2）正如剛剛說明的， views確實具有controller （恰好是一個） 。 不是狀態-他們沒有控制器。 所以我將控制器定義從狀態移到視圖中...

    .state('home.summary', {
      url: '/summary',
      // NOT HERE
      views: {
        'summary': {
          ...
          controller: 'SummaryCtrl',
        }
      }
    })
    .state('home.summary.detail', {
      url: '/detail/:id',
      // NOT HERE
      views: {
        'detail@home': {
          ...
          controller: 'DetailCtrl',

3）父母和孩子的解析應該有不同的名字 。 我這樣更改了子解析（請參見mainyl名稱load2而不是load ） ：

    .state('home.summary.detail', {
      url: '/detail/:id',          
      views: {
        'detail@home': {
          ...
          resolve: {
            load2: function($rootScope, $stateParams) {
              return 'loaded child with param ' + $stateParams.id ;
            }
          },
        }

4）即使我們想要擁有： ui-view不能在轉發器內部。 可以，但是這僅表示狀態視圖將在其中重復放置多次 （但請參見下面的鏈接 ..如何執行此操作）

我將ui-view移到了中繼器之外：

<li tab 
  ng-repeat="tab in tabs track by tab.id" active="tab.active" select="tab.select()">
  <span tab-heading>{{tab.title}}</span>
</li>
<hr />
<div ui-view="detail"></div> // moved outside of repeater

5）如果我們定位的視圖沒有直接放置在其父視圖中，則必須使用絕對命名 ，這就是我使用此視圖的原因：

    .state('home.summary', {
      url: '/summary',          
      views: {
        'summary': { // ok name, while direct parent is home
         ....
        }
      }
    })
    .state('home.summary.detail', {
      url: '/detail/:id',          
      views: {
        'detail@home': { // we have to add @home to say that the target  
          ....           // is in a home state not in our parent
        }
      }

在此處檢查完整的工作解決方案

很少有令人困惑的閱讀（我會說） ：

• 如何使用ui-router更改轉發器內部的詳細信息
• 顯示絕對視圖命名的方式