AngularJS：处理菜单上下文？

Question

我有一个如下所示的菜单：

正如您从地址栏中看到的那样，我在 /clients 路线上。我需要我的菜单突出显示 "Clients" 项。我真的很难做到这一点。在 AngularJS???

中必须有一种直接处理菜单状态的方法

我正在使用 angular-ui-router 进行路由，我很高兴它按预期工作。

这是我的代码：

<div ng-controller="MainCtrl as ctrl">

  <div layout="row">
    <div flex><img src="img/logo4.png" class="logo" /></div>
  </div>



  <md-toolbar hide-gt-sm layout="row" layout-align="end center">
    <md-menu-bar>
      <md-menu>
        <md-button aria-label="Menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
          <i class="material-icons">menu</i>
        </md-button>

        <md-menu-content width="4" ng-model="selected">
          <div data-ng-repeat="t in ctrl.menu">
            <md-menu-item ng-hide="{{ctrl.isDefined(t.subMenus)}}">
              <md-button style="font-size:14px">{{t.name}}</md-button>
            </md-menu-item>

            <md-menu-item ng-hide="{{!ctrl.isDefined(t.subMenus)}}">
              <md-menu>
                <md-button ng-click="$mdOpenMenu()">{{t.name}}</md-button>
                <md-menu-content width="3">
                  <md-menu-item ng-repeat="u in t.subMenus">
                    <md-button style="font-size:14px">{{u.name}}</md-button>
                  </md-menu-item>
                </md-menu-content>
              </md-menu>
            </md-menu-item>
          </div>
        </md-menu-content>
      </md-menu>
    </md-menu-bar>
  </md-toolbar>
</div>

这里是 MainCtrl Javascript:

(function () {
  'use strict';
  angular
  .module('eamorr')
  .controller('MainCtrl', MainCtrl);

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

    console.log("MainCtrl");


    vm.menu = [{
      "id": "home",
      "name": "Home",
      "href": "home"
    }, {
      "id": "about",
      "name": "About",
      "href": "about"
    }, {
      "id": "areas",
      "name": "Specialty Areas",
      "href": "areas",
      "subMenus":[{
        "id:":"areaRetail",
        "name":"Retail Pharmacy",
        "href":"areas?area=retail"
      },{
        "id:":"areaHospital",
        "name":"Hospital Pharmacy",
        "href":"areas?area=hospital"
      },{
        "id:":"areaIndustrial",
        "name":"Industrial Pharmacy",
        "href":"areas?area=industrial"
      }]
    }, {
      "id": "clients",
      "name": "Clients",
      "href": "clients"
    }, {
      "id": "blog",
      "name": "Blog",
      "href": "blog"
    }, {
      "id": "latest",
      "name": "Latest",
      "href": "latest"
    }];
  }


  vm.isDefined = function (thing) {
    if(typeof thing === "undefined"){
      return false;
    }
    return true;
  }
})();

任何人都可以就如何以干净、可维护的方式处理状态提出任何建议吗？

Answer 1

在您的控制器中添加以下行

$scope.state = $state;

Note: Inject $state in your dependencies.

$state.current.name 将为您提供当前状态名称，您可以使用该名称在 ng-class[=16= 的帮助下 change/add class 到目标元素]

ng-class="{'class_name_to_highlight': state.current.name == 'client'}"

其中 class_name_to_highlight 是要突出显示的 CSS class。

Answer 2

UI-如果状态与当前状态匹配，路由器提供了一种添加类的简单方法。我们所要做的就是使用 ui-sref-active 你可以这样写

<li ng-repeat="item in ctr.items" >
     <a ui-sref="{{item.href}}" ui-sref-active="active">{{item.name}}  </a>     
 </li>

Highlight current selected Menu-plunker

AngularJS：处理菜单上下文？

AngularJS: handling menu contexts?

javascript

angularjs

angular-material