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

Question

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

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

下面是我的代码：

UI路由

"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。

此模式不使用路由，因此如果您希望用户能够使用历史记录进行导航，这将行不通。但是，如果您不需要为这些子视图中的每一个设置单独的控制器，include 将完成这项工作。

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>

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

Display different template on selecting an option in menu

html

angularjs

angularjs-scope

angularjs-routing

angular-ui-router