Question

我有一个任务，我必须在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;
        }
    }]);

Answer 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>

如果您不喜欢其中任何一个，那么只需拥有控制器中包含标签的所有数据，它们就会自动连接到该范围。

无法加载包含数据的标签页

1 个答案: