【问题标题】：AngularJS menu - remember which item was clicked and set activeAngularJS 菜单 - 记住单击了哪个项目并设置为活动状态
【发布时间】：2015-11-05 12:15:08
【问题描述】：

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

    <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);
    }

  };
})();

【问题讨论】：

亲爱的 Eamorr，我的解决方案是否有助于解决您的问题？

标签： angularjs material-design angular-material

【解决方案1】：

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

为了突出显示您的菜单，您需要告诉它突出显示。为此，您需要：

为突出显示的菜单按钮定义一个 CSS 类（例如.is-active）
定义返回true或false的函数，具体取决于您发送的路径是否为当前页面
在您的 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 - 好的（但有点复杂）

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

【讨论】：