Angular UI 路由器 - 与孩子和父母一起解决

Question

我有一个角度页面，根据 Page 对象中的值是否等于特定值，我可能会加载另一个状态，我说可能，因为如果不是，那么我不需要加载另一个视图（但也许这就是问题所在？）

这是我当前的状态配置

$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 的基本状态，它会加载我的基本页面（一切正常）。

我还有 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');
    }]);

app/page/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>

app/main/main.html

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

现在我认为子状态与它们的父状态具有相同的解析，但是当 app.page.search 解析执行时，它会抛出一个错误，指出页面未定义。

如何从 app.page.search 访问 app.Page 解析？

我显然设置不正确，但不确定是什么。

正如我之前所说，app 应该加载我的基本页面（它确实如此），app.page 应该加载我的页面内容，app.page.search 应该根据 app.Page 中加载的 Page 对象加载更多内容解决。也许我不应该改变 pageController 中的状态？但我不知道您是否可以从另一个状态配置中更改状态？

Answer 1

我实际上很确定您想要的不是嵌套视图。无论如何，这里有两个解决方案：

第一个：

您实际上可以在 PageController 中确定变量的范围。

$scope.Page = Page;

在您的 PageSearchController 中，您可以通过以下方式访问它：

$scope.Page;

你必须知道 angularJS $scope 的机制。

如果你从 $scope 请求一个 var。如果此变量存在，它将在当前范围内搜索。如果不存在，它将在父范围（此处为您的父状态控制器）中搜索 var 是否存在。如果它到达 rootScope 并且没有找到你的 var，它会触发一个异常。

第二种解决方案：

您可能希望根据某些信息加载 HTML 的一部分。然后不要使用状态，只需使用带有 ng-if 条件的 ng-include。

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

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

希望它能帮助您解决问题。