AngularJS菜单 - 记住哪个项目被点击并设置为活动

Question

我有一个菜单，但不幸的是，当我点击一个项目时，它没有被记住（即突出灰色）。

<div ng-controller="DropdownCtrl as ctrl"> 
     <md-menu> 
     <md-button aria-label="Menu" class="md-icon-button" ng-click="ctrl.openMenu($mdOpenMenu, $event)"> 
      <i class="material-icons">menu</i> 
     </md-button> 

     <md-menu-content width="4" ng-model="selected"> 


      <md-menu-item> 
      <md-button href="home" ria-label="Home"> 
       Home 
      </md-button> 
      </md-menu-item> 
      <md-menu-divider></md-menu-divider> 
      <md-menu-item> 
      <md-button href="about" ria-label="About"> 
       About 
      </md-button> 
      </md-menu-item> 
      <!--<md-menu-divider></md-menu-divider>--> 
      <md-menu-item> 
      <md-button href="areas" ria-label="Areas"> 
       Speciality Areas 
      </md-button> 
      </md-menu-item> 
      <md-menu-item> 
      <md-button href="clients" ria-label="Clients"> 
       Clients 
      </md-button> 
      </md-menu-item> 
      <md-menu-item> 
      <md-button href="blog" ria-label="Blog"> 
       Blog 
      </md-button> 
      </md-menu-item> 
      <md-menu-item> 
      <md-button href="latest" ria-label="Latest"> 
       Latest 
      </md-button> 
      </md-menu-item> 




     </md-menu-content> 
     </md-menu> 
    </div> 

正如你可以从上面的截图中看到，我已单击“客户”已经，我的“客户”页面上，但“客户”项不突出！ ！

任何人都可以分享一些提示，如何以最轻量级的方式做到这一点？

这里是我的JavaScript控制器：

(function() { 
    'use strict'; 
    angular 
    .module('app') 
    .controller('DropdownCtrl', DropdownCtrl); 


    function DropdownCtrl($scope, $meteor, $mdDialog) { 
    var vm=this; 

    vm.date = new Date(); 

    var originatorEv; 
    vm.openMenu = function($mdOpenMenu, ev) { 
     originatorEv = ev; 
     $mdOpenMenu(ev); 
    }; 

    vm.selected = function(ev){ 
     console.log(ev); 
    } 

    }; 
})(); 

Answer 1

解决方案1 ​​ - 丑陋的（但快）一个

为了让您的菜单高亮，你需要告诉它突出。对于这一点，你需要：

1. 定义CSS类高亮显示的菜单键（例如：.is-active）
2. 定义取决于你发送的路径是否是当前
页面 true或 false返回功能
3. 在你的HTML，分配在第1点中定义的CSS类根据当前的路径是什么

例如：

<md-button href="clients" ng-class="{'is-active': vm.isCurrentPage('/clients')}"> 
    Clients 
</md-button> 

以及JavaScript函数：

function isCurrentPage(path) { 
    return path === $location.path(); 
} 

解决方案2 - 好（但稍微复杂一些）一个

保存您的服务菜单的状态。因此，您可以从应用程序的任何位置访问应用程序的状态（当前页面，上一页面等）。这种方法的好处是服务是角度单身，并且您对菜单进行的任何更改都会影响同一对象（菜单服务），因此应用程序的状态将始终保持同步。