AngualrJS中製作一個有關選單的Directive

Darren Ji發表於2016-01-26
JS

 

通常我們這樣寫一個選單：

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

 

相關文章