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 - 好的（但有点复杂）一个

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