angularjs – Angular Material Nav Bar设置默认活动项
发布时间:2020-12-17 07:00:10 所属栏目:安全 来源:网络整理
导读:我正在尝试使用 Angular Material的角度应用程序,似乎无法让我的导航栏设置要选择的默认项目.我使用 Angular Material Navbar( Directive Info)显示我的视图,这是我的导航栏模板html: !-- Navbar --md-content class="md-padding" md-nav-bar md-selected-n
我正在尝试使用
Angular Material的角度应用程序,似乎无法让我的导航栏设置要选择的默认项目.我使用
Angular Material Navbar(
Directive Info)显示我的视图,这是我的导航栏模板html:
<!-- Navbar --> <md-content class="md-padding"> <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links"> <md-nav-item md-nav-sref="layout.home" name="home">Home</md-nav-item> <md-nav-item md-nav-sref="layout.gallery" name="gallery">Gallery</md-nav-item> <md-nav-item md-nav-sref="#" name="page3">Page Three</md-nav-item> </md-nav-bar> </md-content> 在我的控制器中,我将currentNavItem设置为’home’,它应该对应于我的名为home的md-nav-item,我认为应该根据md-selected-nav-item =“currentNavItem”将其设置为选中 export default class HeaderController { constructor($log) { Object.assign(this,{ $log,}); this.currentNavItem = 'home'; } $onInit() { this.$log.debug('HeaderController.$onInit'); this.$log.debug(this.currentNavItem); } } 任何帮助将不胜感激,为什么这不会使我在加载应用程序时默认选中我的列表项. 编辑 在我的情况下的问题是我的控制器没有在导航栏选择`md-selected-nav-item =“$ctrl.currentNavItem”’中使用.为每个md-nav-item添加值似乎不会影响活动项目设置. 解决方法
您需要设置每个md-nav-item的值属性 –
CodePen
标记 <div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp"> <!-- Navbar --> <md-content class="md-padding"> <md-nav-bar md-selected-nav-item="vm.currentNavItem" nav-bar-aria-label="navigation links"> <md-nav-item md-nav-sref="layout.home" name="home" value="home">Home</md-nav-item> <md-nav-item md-nav-sref="layout.gallery" name="gallery" value="gallery">Gallery</md-nav-item> <md-nav-item md-nav-sref="#" name="page3" value ="page3">Page Three</md-nav-item> </md-nav-bar> </md-content> </div> JS angular.module(‘MyApp’,[‘ngMaterial’,’ngMessages’]) .controller('AppCtrl',function() { this.currentNavItem = "home"; }); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |