无法加载包含数据的选项卡式页面

Unable to load tabbed pages with data

本文关键字：选项 加载 包含 数据      更新时间：2023-09-26

我有一个任务，我必须在 3 个选项卡下标记 3 个不同的 html 页面。所有这些页面都会在用户导航到网格后立即加载数据。我可以标记我的 html 页面。有一个工作点。http://plnkr.co/edit/0XgquovKIICmgGcSVSef?p=preview但是现在的问题是我无法像以前那样加载带有数据的页面。我哪里可能出错了？这些选项卡式页面不会向网格加载数据。 目录

<style>
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    li {
        float: left;
        border: 1px solid #000;
        border-bottom-width: 0;
        margin: 3px 3px 0px 3px;
        padding: 5px 5px 0px 5px;
        background-color: none;
        color: none;
    }
</style>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="tabs">
        <ul>
            <li ng-repeat="tab in tabs"
                ng-class="{active:isActiveTab(tab.url)}"
                ng-click="onClickTab(tab)">{{tab.title}}</li>
        </ul>
        <div id="mainView">
            <div ng-include="currentTab"></div>
        </div>
    </div>
</body>
</html>

控制器代码 ：

b360MyUtilities.controller("TabsController",
    [
    "$scope",
    function ($scope) {
        $scope.tabs = [{
            title: 'PlanSetupStatus',
            controller: "PlanSetupStatusController",
            templateUrl: "app/templates/views/utilities/PlanSetupStatus.html"
        }, {
            title: 'MigrationScheduled',
            controller: "MigrationScheduledController",
            templateUrl: "app/templates/views/utilities/MigrationHistory.html"
        }, {
            title: 'MigrationHistory',
            controller: "MigrationHistoryController",
            templateUrl: "app/templates/views/utilities/MigrationScheduled.html"
        }];
        $scope.currentTab =  "app/templates/views/utilities/PlanSetupStatus.html"
        $scope.onClickTab = function (tab) {
            $scope.currentTab = tab.templateUrl;
        }
        $scope.isActiveTab = function (tabUrl) {
            return tabUrl == $scope.currentTab;
        }
    }]);

我添加了一条评论，但 Ill 在这里更详细地解释了。您提供的 plunker 显示了一个简单的模板更改，但控制器仍然是父控制器或基础。另一方面，您希望添加唯一数据并实际呈现不同的页面。

因此，如果您使用的是UI路由器，则解决方案非常简单...为选项卡定义 3 个路由，然后使用如下内容：

<ul class="nav nav-tabs" role="tablist">
        <li ng-class="{active: 'PassageTab' === currTab}" ng-if="isReadingComprehension || showSATPassage()">
            <a ui-sref=".editKeywordParametersBase.editQuestionPassage({questionType: questionType})" ng-click="moveToTab('PassageTab')">
             {{ltgLabels.PASSAGE_LABEL}}
            </a>
        </li>
        <li ng-class="{active: 'SPRQuestionEditing' === currTab}" ng-if="isSPR">
            <a ui-sref=".editSPRQuestion" ng-click="moveToTab('SPRQuestionEditing')">
             {{ltgLabels.MAIN_SPR_QUESTION}}
            </a>
        </li>
        <li ng-class="{active: 'NumericEntryQuestionEditing' === currTab}" ng-if="isNumericEntry">
            <a ui-sref=".editNumericEntryQuestion" ng-click="moveToTab('NumericEntryQuestionEditing')">
              {{ltgLabels.NUMERIC_ENTRY_TITLE}}
           </a>
        </li>
        <li ng-class="{active: 'QuestionEditing' === currTab}" ng-if="isMultipleChoice">
            <a ui-sref=".editQuestion" ng-click="moveToTab('QuestionEditing')">
             {{ltgLabels.MAIN_QUESTION_TAB_LABEL}}
            </a>
        </li>
        <li ng-class="{active: 'Keyword' === currTab}">
            <a ui-sref=".editKeywordParametersBase.editQuestionkeywords({questionType: questionType})" ng-click="moveToTab('Keyword');">
              {{ltgLabels.KEYWORDS_TITLE}}
            </a>
        </li>
        <li ng-class="{active: 'QuestionParams' === currTab}">
            <a ui-sref=".editQuestionParameters({questionType: questionType})" ng-click="moveToTab('QuestionParams')">
              {{ltgLabels.QUESTION_PARAMETERS_TITLE}}
            </a>
        </li>
        <li ng-class="{active: 'VersionHistory' === currTab}">
            <a ui-sref=".versionHistory({questionType: questionType})" ng-click="moveToTab('VersionHistory')">
              {{ltgLabels.VERSION_HISTORY}}
            </a>
        </li>
    </ul>

如果你不想这样做...您可以随时将控制器注入模板（我不喜欢该解决方案，但它应该有效）。喜欢：

<script type="text/ng-template" class="template" id="addLegTemplate">
<div ng-controller='myController'>
<!--html for adding a new leg-->
</div>

如果您不喜欢其中任何一个，那么只需将所有数据保存在保存选项卡的控制器中，它们将自动连接到该范围。

相关文章：