Angular UI路由器 - 解決孩子和父母

Question

我有一個角頁面，並根據如果頁面對象中的值等於特定值，我想也許加載另一個狀態，我說也許，因爲如果它不是然後我不需要加載另一個視圖（但也許這是這是怎麼回事了？）

這是我目前的狀態配置

$stateProvider 
    .state('app', { 
     url: '', 
     abstract: true, 
     templateProvider: ['$templateCache', function ($templateCache) { 
      return $templateCache.get('app/main/main.html'); 
     }], 
     controller: 'MainController', 
     resolve: { 
      Pages: ['PageApi', function (PageApi) { 
       return PageApi.getAll(); 
      }] 
     } 

    }) 
    .state('app.page', { 
     url: '/page/{id}', 
     params: { 
      id: { value: 0 } 
     }, 
     templateProvider: ['$templateCache', function ($templateCache) { 
      return $templateCache.get('app/page/page.html'); 
     }], 
     controller: 'PageController', 
     resolve: { 
      Page: ['$stateParams', 'PageApi', function ($stateParams, PageApi) { 
       return PageApi.get($stateParams.id); 
      }], 
      Contents: ['$stateParams', 'ContentApi', function($stateParams, ContentApi) { 
       return ContentApi.getByPage($stateParams.id); 
      }] 
     } 
    }) 
    .state('app.page.search', { 
     templateProvider: ['$templateCache', function ($templateCache) { 
      return $templateCache.get('app/page/partials/page-search.tpl.html'); 
     }], 
     controller: 'PageSearchController', 
     resolve: { 
      Module: ['ModuleApi', 'Page', function(ModuleApi, Page) { 
       return ModuleApi.get(Page.moduleId); 
      }] 
     } 
    }) 

正如你可以看到我有我的基本狀態稱爲應用程序，加載我的基本頁面（一切正常）。

我也有app.page這將載入我的部分page.html中（再次罰款）

app.page使用該控制器和該部分的html文件。

angular.module('app').controller('PageController', ['$state', '$scope', 'Page', 'Contents', 
    function ($state, $scope, Page, Contents) { 

     if (Page.action == 'search') 
      $state.go('app.page.search'); 
    }]); 

應用程序/頁/ page.html中

<!-- main --> 
<section role="main" class="row"> 
    <div ui-view></div> 

    <div ng-if="showSide" class="col-md-3"> 
     <div page-location location="side"></div> 
    </div> 
</section> 

應用程序/主/ main.html中

<div class="container"> 
    <div class="wrapper"> 
     <!-- content --> 
     <div ui-view class="content"></div> 
    </div> 
</div> 

現在我認爲孩子的狀態有同樣的解析爲他們的父母，但當app.page.search解析執行時，它會拋出一個錯誤，說明Page未定義。

如何訪問app.page從app.page.search解析？

我明顯地設置了錯誤的東西，但不知道是什麼。

正如我之前所說，應用程序應該加載我的基本頁面（它所做的），app.page應該加載我的頁面內容，而app.page.search應該加載更多的內容，取決於應用中加載的Page對象。頁面解析。也許我不應該改變pageController中的狀態？但我不知道你是否可以在另一個狀態配置中更改狀態？

Answer 1

我其實很確定你想要的不是嵌套視圖。反正這裏是給你兩個解決方案：一是

一個

：

實際上，你可以範圍，你的PageController您的變量。

$scope.Page = Page; 

在你PageSearchController，你就可以與訪問它：

$scope.Page; 

你必須知道的angularJS $範圍的機制。

如果您從$ scope請求一個var。它會在當前範圍內搜索這個變量是否存在。如果不存在，則它會在父範圍（這裏是您的父狀態控制器）中搜索var是否存在。如果它到達rootScope並且沒有找到你的var，它會引發異常。

解決方法二：

你可能想加載HTML取決於一些信息的一部分。那麼不要使用狀態，只要使用ng-if和ng-if條件。

<ng-include ng-if="Page.action == 'search'" ng-controller="PageSearchController" src="app/page/partials/page-search.tpl.html"></ng-include> 

如果這實際上是一個嵌套視圖，請選擇第一個視圖。如果這只是您的觀點的一部分，請選擇第二個。

希望它能幫助你解決你的問題。