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

应用程序/网页/ 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解析执行时，它会抛出一个错误，指出页面未定义。

如何从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请求var。如果此变量存在，它将在当前范围内搜索。如果不存在，它将在父作用域（这里是您的父状态控制器）中搜索var是否存在。如果它到达rootScope并且找不到你的var，则会触发异常。

第二个解决方案：

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

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

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

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

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

1 个答案: