Angular材料sidenav在智能手机上关闭

时间:2015-05-06 12:25:59

标签: jquery angular-material

我有以下代码

page.html中:

<!DOCTYPE html>
<html lang="en" ng-app="MyApp">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">

    <!-- Base url for all relative links -->
    <base href="/test/" />

    <link rel="stylesheet" href="css/app.css" type="text/css" />
</head>

<body>

    <div layout="column" flex ng-controller="MainController">
        <md-toolbar layout="row">
            <button ng-click="toggleSidenav('sidenav')" class="menuBtn">
                <span class="visually-hidden">Menu</span>
            </button>
            <h1 class="md-toolbar-tools" layout-align-gt-sm="center">Hello, World</h1>
        </md-toolbar>

        <!-- Sidebar -->
        <div layout="row" flex>
            <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="sidenav">

                <div id="content">
                    <md-content layout-padding flex class="md-padding">
                          ... some content here ...
                    </md-content>
                </div>
            </md-sidenav>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <script src="js/angular.min.js" type="text/javascript"></script>
    <script src="//code.angularjs.org/1.3.15/angular-messages.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
    <script src="js/app.js" type="text/javascript"></script>

</body>

</html>

App.js:

(function () {
    'use strict';

    var app = angular.module('MyApp', ['ngMaterial','ngMessages']);

    app.controller('MainController', ['$scope', '$mdSidenav', function($scope, $mdSidenav){
        $scope.toggleSidenav = function(menuId) {
            $mdSidenav(menuId).toggle();
        };
    }]);

})();

问题在于移动设备(在PC上运行良好)每当我展开侧边栏时它会自动关闭。我哪里错了?

0 个答案:

没有答案