Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs – 如何获得一个完整的高度sidenav与角材料大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用Angular-Material并实现了一个SideNav菜单。当屏幕尺寸较小时,菜单被隐藏,当单击菜单切换按钮时,菜单从左侧滑出,具有整页高度。当屏幕较大时,菜单显示为固定在左侧,但不是在整页高度。

如何使固定菜单显示为整页高度。
我一直在玩css和其他md属性,但只是无法找到如何。

<div ng-controller="appCtrl" layout="vertical" layout-fill>

<md-toolbar class="md.medium-tall app-toolbar">
    <div class="md-toolbar-tools" ng-click="toggleMenu()">
        <button class="menu-icon" hide-sm aria-label="Toggle Menu">
            <md-icon icon="img/icons/ic_menu_24px.svg">
                <object class="md-icon" data="img/icons/ic_menu_24px.svg"></object>
            </md-icon>
        </button>
        <h2>
            <span>Dev.Material</span>
        </h2>
    </div>
</md-toolbar>

<section layout="horizontal" flex>
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" component-id="menu" is-locked-open="$media('sm')">

        <md-toolbar md-theme="purple">
            <h1 class="md-toolbar-tools">Sidenav Left</h1>
        </md-toolbar>

        <md-content class="md-padding" ng-controller="menuCtrl">
            <p>
                This sidenav is locked open on your device. To go BACk to the default behavior,narrow your display.
            </p>
        </md-content>
    </md-sidenav>

    <md-content flex class="md-padding">
        Some content !!
    </md-content>

和控制器:

(function () { 
'use Strict';

var controllerId = 'appCtrl';
angular.module('app').controller(controllerId,['$scope','$timeout','$mdSidenav',appCtrl]);

function appCtrl($scope,$timeout,$mdSidenav) {
    var vm = this;

    $scope.toggleMenu = function() {
        $mdSidenav('menu').toggle();
    };
};    
})();

(function () { 
'use Strict';

var controllerId = 'menuCtrl';
angular.module('app').controller(controllerId,menuCtrl]);

function menuCtrl($scope,$mdSidenav) {
    var vm = this;

    $scope.close = function() {
        $mdSidenav('menu').close();
    };
};
})();
我有与angular-material 0.6.0 rc1完全相同的问题。 (我使用的代码demo site)。

问题不是来自角材料代码,而是来自您的页面的父css容器,不是全高度。

您的网页应该有以下结构:

<ui-view class="ng-scope">
    <div ng-controller="appCtrl" layout="vertical" layout-fill>
        ... your md sidenav code here ...
    </div>
</ui-view>

问题来自ng范围类,它不是全高。在我的情况下,我只是复制/从demo site代码添加这个im我的cutom css文件

.ng-scope { height: 100%; }

结果是在锁定打开和解锁模式下,全高度sidenav工作正常。

大佬总结

以上是大佬教程为你收集整理的angularjs – 如何获得一个完整的高度sidenav与角材料全部内容,希望文章能够帮你解决angularjs – 如何获得一个完整的高度sidenav与角材料所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。