Question

我正在尝试在选择菜单选项时显示不同的模板。我能够显示它，但我希望菜单与菜单列表中选择的相应模板一起显示（即，我想要在同一页面上选择菜单和相应的选项）。当我更改菜单选项时，只有选项模板必须更改并加载不同的模板保持仍然显示菜单。

希望你明白了。有人可以建议一个方法吗？谢谢。

以下是我的代码：

用户界面路由

"use strict";

angular.module('fleetOperate').config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("main");
    $stateProvider
    .state('main', {
        url: '/main',
        templateUrl: 'app/landingPage/main.html'

    })
.state('settings', {
        url: '/settings',
        views: {
            '': {
                controller: 'settingsController', 
               templateUrl:'app/landingPage/features/settings/settingsTemplate.html'
            },
            'settingsControlPanel@settings': {
                controller: 'settingsControlPanelController',
                    templateUrl:'app/landingPage/features/settings/settingsControlPanel/settingsControlPanelTemplate.html'
                },

                    'truckSettings@settings': {
                        controller: 'truckSettingsController',
                        templateUrl: 'app/landingPage/features/settings/settingsControlPanel/truckSettings/truckSettingsTemplate.html'
                    },
                    'trailerSettings@settings': {
                        controller: 'trailerSettingsController',
                        templateUrl: 'app/landingPage/features/settings/settingsControlPanel/trailerSettings/trailerSettingsTemplate.html'
                    }
                }                    
    })

});

主要HTML

<div class="icon-bar" ui-view="main">
<a ui-sref="settings" class="item">
        <i class="fa fa-cog" style="font-size:48px;"></i>
        <label>Settings</label>

设置HTML

<div ui-view="settingsControlPanel"></div>

菜单HTML

<div class="panel settings-panel panel-primary">
    <div class="panel-heading" align="center">Settings</div>
    <ul>
        <li><a ui-sref="truckSettings"><i class="fa fa-truck settings-truck-icon"></i>Truck Settings</a></li>
        <li><a ui-sref="trailerSettings"><i class="fa fa-train settings-truck-icon"></i>Trailer Settings</a></li>
</ul>

</div>
<div ui-view="truckSettings"></div>
<div ui-view="trailerSettings"></div>

卡车设置HTML

<div class="panel truck-settings-panel panel-primary">
    <div class="panel-heading">Truck Settings</div>

    <table class="table truck-settings-table table-bordered table-condensed table-striped">

        <tr>
            <th>Model: </th>
            <td class="list-truck-settings-data"></td>
        </tr>

        <tr>
            <th>
                Make Month & Year:
            </th>
            <td class="list-truck-settings-data"></td>
        </tr>
 </table>
</div>

预告片设置HTML

<div class="panel trailer-settings-panel panel-primary">
        <div class="panel-heading">Trailer Settings</div>

        <table class="table trailer-settings-table table-bordered table-condensed table-striped">

            <tr>
                <th>Model: </th>
                <td class="list-trailer-settings-data"></td>
            </tr>

            <tr>
                <th>
                    Make Month & Year:
                </th>
                <td class="list-trailer-settings-data"></td>
            </tr>
     </table>
    </div>

Answer 1

如果您不需要路由到单个页面，但只是在同一控制器视图中打开和关闭HTML的不同部分，则可以使用ng-includes。单击该菜单会将特定包含的变量设置为打开或关闭，使其可见或不可见。

示例：

菜单HTML

<div class="panel settings-panel panel-primary">
    <div class="panel-heading" align="center">Settings</div>
    <ul>
        <li ng-click="showTruck = true; showTrailer = false;"><i class="fa fa-truck settings-truck-icon"></i>Truck Settings</li>
        <li ng-click="showTruck = false; showTrailer = true;"><i class="fa fa-train settings-truck-icon"></i>Trailer Settings</li>
</ul>

</div>
<div ng-if="showTrailer" ng-include="path/to/trailerSettingsTemplate.html"></div>
<div ng-if="showTruck" ng-include="path/to/truckSettingsTemplate.html"></div>

理想情况下，菜单点击逻辑应该是控制器中的一个方法，它将所有值设置为false，并且只显示为true的值。

此模式不使用路由，因此如果您希望用户能够使用历史记录导航，则无法使用。但是，如果您不需要为每个子视图使用单独的控制器，那么包含就可以完成这项工作。

Angular docs for ngInclude

Answer 2

我发现这是上述问题的一个选项。我们可以简单地使用ng-show来触发视图，而控制器仍然绑定到路由器中的每个视图。

菜单HTML

<div class="panel settings-panel panel-primary">
    <div class="panel-heading" align="center">Settings</div>
    <ul>
        <li><a ng-click="truck=true; trailer=false"><i class="fa fa-truck settings-truck-icon"></i>Truck Settings</a></li>
        <li><a ng-click="truck=false; trailer=true"><i class="fa fa-train settings-truck-icon"></i>Trailer Settings</a></li>
</ul>

</div>
<div ui-view="truckSettings" ng-show="truck"></div>
<div ui-view="trailerSettings" ng-show="trailer"></div>

在菜单中选择选项时显示不同的模板

2 个答案: