星空网 > 软件开发 > Java

AngualrJS中制作一个有关菜单的Directive

 

通常我们这样写一个菜单:

<ul>  <li data-ng-class="{'active': highlight('/orders')}">    <a href="#/orders">Orders</a>  </li></ul>

 

菜单项是否高亮显示取决于controller中的highlight方法。

 

vm.highlight = funciton(path){  return $locaiton.path().substr(0, path.lenght) === path;}

 

如果以Directive的方式会更简洁。

 

<ul menu-highlighter highlight-class-name="active">  <li><a href="#/customers">Customers</a></li>  <li><a href="#/orders">Customers</a></li>  <li><a href="#/about">Customers</a></li></ul>

 

Directive大致是:

 

(function(){  var injectParams = ['$location'];  var menuHighlighter = function($location){      var link = function(scope, element){      function setActive(){        var path = $location.path();        var className = scope.highlightClassName || 'active';        if(path){          angular.forEac(element.find('li'), function(li){            //<a href="#/customers">Customers</a>            var anchor = li.querySelector('a');            //#/customers            var href=(anchor && anchor.href) ? anchor.href : anchor.getAttribute('data-href').replace('#','');            //customers            var trimmedHref = href.substr(href.indexOf('#/')+1, href.length);            var basePath = path.substr(0, trimmedHref.length);            if(trimmedHref === basePath){              angular.element(li).addClass(className);            } else {              angular.element(li).removeClass(className);            }          });        }            }            setActive();      scope.$on('$locationChangeSuccess', setActive);    };      return {      restrict: 'A',      scope: {        highlightClassName: '@'      },      link: link    }  };    menuHighlighter.$inject = injectParams;    angular.module('my.directives')    .directive('menuHighlighter', menuHighlighter);}());

 




原标题:AngualrJS中制作一个有关菜单的Directive

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

贝玲妃:https://www.goluckyvip.com/tag/2148.html
inspiredhouseholdshop:https://www.goluckyvip.com/tag/21480.html
Instabot PW:https://www.goluckyvip.com/tag/21481.html
Instabox:https://www.goluckyvip.com/tag/21482.html
Instacart:https://www.goluckyvip.com/tag/21483.html
InstaDUB:https://www.goluckyvip.com/tag/21484.html
最新研究:亚马逊、沃尔玛、Temu和Shein卖家重合率不断攀升:https://www.kjdsnews.com/a/1836554.html
三清山好玩乜?:https://www.vstour.cn/a/365182.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流