Question

我试图在离子中显示侧面菜单，我为侧面菜单编写了代码。

如果我在一个页面中编写所有代码，则显示侧面菜单并且拖动也正常。

同样的方法，我试图显示侧面菜单证明路线$stateProvider，这里根工作正常，它也没有任何问题进入主页。但是在主页中，它显示为空白，我的意思是白页，我尝试使用h1标签在那时写文本，它也显示白页。

我的要求是，如果我点击或拖动主页中的菜单，它应该打开侧面菜单，同时也必须是不同文件中的代码。

INDEX.HTML

<!DOCTYPE html>
<html ng-app="ionicApp">

<head>
    <title>IonicSideMenu Example</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="http://code.ionicframework.com/1.0.0-rc.4/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/1.0.0-rc.4/js/ionic.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
    <script src="Module.js"></script>
    <script src="config.js"></script>
    <script src="AppCtrl.js"></script>
    <script src="MenuController.js"></script>
</head>

<body ng-controller="AppCtrl">
    <ion-nav-view animation="slide-left-right"></ion-nav-view>
</body>

</html>

MODULE.JS

var ionicInfoApp = angular.module('ionicApp', ['ionic']);

CONFIG.JS

ionicInfoApp.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('/Home', {
            templateUrl: 'Home.html',
            controller: "MenuController"
        })
        .state('/Item1', {
            templateUrl: 'item1.html'
                // controller : "MenuController"
        })
        .state('/Item2', {
            templateUrl: 'item2.html'
                //controller : "MenuController"
        })
    $urlRouterProvider.otherwise('/Home');
});

AppCtrl

ionicInfoApp.controller('AppCtrl', function($scope, $ionicSideMenuDelegate) {

    ionic.Platform.ready(function() {

    });

});

MenuController

ionicInfoApp.controller('MenuController', function($scope, $ionicSideMenuDelegate) {
    $scope.toggleLeft = function() {
        $ionicSideMenuDelegate.toggleLeft();
    }
});

home.html的

<div ng-controller="MenuController">
    <ion-side-menus>
        <ion-side-menu-content>
            <ion-header-bar class="bar-dark">
                <button class="button button-icon icon ion-navicon" ng-click="toggleLeft()"></button>
                <h1 class="title">App</h1>
            </ion-header-bar>
            <ion-content>
            </ion-content>
        </ion-side-menu-content>
        <ion-side-menu side="left">
            <ion-header-bar class="bar-dark">
                <h1 class="title">Projects</h1>
            </ion-header-bar>
            <ion-content>
                <ul>
                    <li>Item1</li>
                    <li>Item2</li>
                </ul>
            </ion-content>
        </ion-side-menu>
    </ion-side-menus>
</div>

Answer 1

在index.html中保留ion-side-menus指令，并使用ng-include在其中加载正确的模板，具体取决于带有模板URL的字符串变量。

https://docs.angularjs.org/api/ng/directive/ngInclude

可以在状态提供程序中选择该变量，查找如何将自定义数据附加到状态对象

Answer 2

Side Menus不应位于 ionNavBar 容器中。在你的代码中，当它们没有被放置在正确的位置时，它的某些功能并不能很好地工作。

<强> home.html的

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-stable">
            <ion-nav-back-button>
            </ion-nav-back-button>
            <ion-nav-buttons side="left">
                <button class="button button-icon icon ion-navicon" menu-toggle="left"></button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>
    <ion-side-menu side="left">
        <ion-header-bar class="bar-dark">
            <h1 class="title">Projects</h1>
        </ion-header-bar>
        <ion-content>
            <ion-item menu-close href="#/app/item1">
                Item1
            </ion-item>
            <ion-item menu-close href="#/app/item2">
                Item2
            </ion-item>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

<强> config.js

ionicInfoApp.config(function($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state('app', {
            url: '/app',
            // abstract: true,
            templateUrl: 'templates/menu.html',
            controller: 'menuController'
        })

    .state('app.item1', {
        url: '/item1',
        views: {
            'menuContent': {
                templateUrl: 'templates/item1.html'
            }
        }
    })

    .state('app.item2', {
        url: '/item2',
        views: {
            'menuContent': {
                templateUrl: 'templates/item2.html'
            }
        }
    });
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/app/item1');
});

如果您需要任何帮助。请告诉我。谢谢

使用不同的页面

INDEX.HTML

CONFIG.JS

AppCtrl

MenuController

2 个答案: