无法加载带有数据的标签页答案

【问题标题】：Unable to load tabbed pages with data无法加载带有数据的标签页
【发布时间】：2015-08-30 18:35:25
【问题描述】：

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

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

【问题讨论】：

ng-include 不刷新控制器只是一个模板......在这里你正在尝试加载一个控制器，我会使用 ui-router 和 ui-sref 这将让你加载控制器和模板...

标签： javascript jquery angularjs model-view-controller

【解决方案1】：

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

因此，如果您使用的是 ui-router，则解决方案非常简单...为选项卡定义 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>

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

【讨论】：

我使用了您提供的第二个解决方案，它的工作原理就像一个魅力。感谢您的指导
如何禁用特定的选项卡？
禁用或删除？您可以根据需要添加 ng-disabled 或 ng-if 或 ng-show/hide..
我只想让第三个选项卡不响应。我在这里用标签完成了这件事，plnkr.co/edit/X5ILJAkkfzcU6zBvYCfl?p=preview。但是使用
标签我无法做到这一点

然后您可以在控制器中执行此操作... if(!condition){$scope.currentTab = tab} 或类似的东西