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>

从上面的截图可以看出，我已经点击了"Clients"，我在"clients"页面，但是"Clients"项没有高亮！！！

任何人都可以分享一些关于如何以最轻量级的方式执行此操作的技巧吗？

这是我的控制器 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 - 丑陋（但速度快）的解决方案

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

为突出显示的菜单按钮定义 css class（例如 .is-active）
定义一个 returns true 或 false 的函数，具体取决于您发送的路径是否为当前页面
在您的 html 中，根据当前路径分配第 1 点中定义的 css class

例如：

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

和javascript函数：

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

解决方案 2 - 好的（但有点复杂）

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

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

AngularJS menu - remember which item was clicked and set active

angularjs

material-design

angular-material

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

解决方案 2 - 好的（但有点复杂）