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> 

如果这实际上是一个嵌套视图，请选择第一个视图。如果这只是您的观点的一部分，请选择第二个。

希望它能帮助你解决你的问题。