Question

我已创建了一个自定义指令，可根据网址在菜单列表中为点击的active添加li类。

.directive('addActive', [function() {
    return{
        ...
        link : function(scope, element, attrs){

                pageUrl = location.pathname;
                $('#sidebar-left .nav li.active').removeClass("active");
                if (pageUrl) {
                    debugger
                    console.log($('.nav li:has(a[href="' + pageUrl + '"])'))
                    $('.nav li:has(a[href="' + pageUrl + '"])').addClass("active");
                }
        }
    }
}]);

指令代码定义在单击菜单时，应为active添加current url类。如何在html代码中使用该指令？

HTML：

 <div id="sidebar-left" class="col-xs-2 col-sm-2">
            <ul class="nav main-menu">
                <li class="dropdown ng-scope" ng-repeat="parent in menu">
                    <a href="/employee/Home" class="dropdown-toggle" ng-click="tabName(parent.name)">
                        <i class="fa fa-home"></i>
                        <span class="hidden-xs ng-binding">Home</span>
                    </a>                       
                </li>
                <li class="dropdown ng-scope" ng-repeat="parent in menu">
                    <a href="/documents/doc_details" class="dropdown-toggle" ng-click="tabName(parent.name)">
                        <i class="fa fa-file-text"></i>
                        <span class="hidden-xs ng-binding">Documents</span>
                    </a>                       
                </li>
                <li class="dropdown ng-scope" ng-repeat="parent in menu">
                    <a href="#" class="dropdown-toggle" ng-click="tabName(parent.name)">
                        <i class="fa fa-money"></i>
                        <span class="hidden-xs ng-binding">Pay &amp; Benifits</span>
                    </a>
                    <ul class="dropdown-menu">
                       <li ng-repeat="child in parent.children" class="ng-scope">
                            <a href="/pay/paymanagement" ng-click="tabName(child.name)" class="ng-binding">slips</a>
                        </li>
                    </ul>
                </li>                    
            </ul>
        </div>

请大家帮帮忙？

Answer 1

您缺少有关指令的最重要信息：'restrict'属性指示如何在您的html中使用该指令。例如：使用retrict：'E'表示您的指令可以用作html元素

<add-active></add-active>

但我想在你的情况下，你的限制值是'A'，你应该将它用作属性：

<div add-active></div>

有关详细信息，请参阅angularJS指令的文档： https://docs.angularjs.org/guide/directive

但我同意上面的人的意见，在这种情况下，你可能只需要使用ng-class（这也是一个指令）。

Answer 2

我认为Yaniv的答案就是你所需要的。但我建议你试试ng-class。在您的代码中，您正在尝试使用该URL，因此我认为这可能对您有所帮助： APK with ImmutableList defined

如何在html中使用自定义指令

2 个答案: