How to use custom directives in html

Question

I have created one custom directive to add active class for clicked li in menu list based on url.

.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");
                }
        }
    }
}]);

directive code defines that when a menu is clicked, active class should be added for current url. how can I use this directive in html code?

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>

Please guys any help?

You should simply use ng-class on your component, instead of a new directive. https://docs.angularjs.org/api/ng/directive/ngClass — Deblaton Jean-Philippe, Jan 22 '18 at 09:20
Above comment is right. If you still want to know how to use directives, have a look at the docs. https://docs.angularjs.org/guide/directive — JSON Derulo, Jan 22 '18 at 09:24
I aggre ng-class is the way to do here . What you should probably do is hold a list with boolean values for your
@DeblatonJean-Philippe @D.Simon if I use `ng-click` in `li`, each click of list ,page will get refreshed.so `active` class cant be added.Am I right? — laz, Jan 22 '18 at 10:19
@PanosK you are correct but for li each click my page gets refreshed.Thats why am trying to do using current url. — laz, Jan 22 '18 at 10:30
@laz your condition on ng-class should be based on your current url so you probably want to keep this on a scope variable in your controller, using jquery addClass is definitely not the correct way to do this — Panos K, Jan 22 '18 at 10:50
@PanosK can you please give some sample code for my condition.please — laz, Jan 22 '18 at 10:51
ng-class="{'active': $location.path() == 'pathToAddActiveCondition' }" not tested but should work. Iwill make a plunkr when i find some time — Panos K, Jan 22 '18 at 11:00
@laz AngularJS is for Single Page Applications (SPA). Those shouldn't refresh, only render data (on $digest cycle for angularjs) — Aleksey Solovey, Jan 22 '18 at 11:01

score 0 · Answer 1 · answered Jan 22 '18 at 09:30

you are missing the most important information about your directive: the 'restrict' attribute indicates how should the directive can be used in your html. For instance: using retrict: 'E', means that your directive can be used as an html element

<add-active></add-active>

But i guess that in you situation, your restrict value is 'A', and you should use it as an attribute:

<div add-active></div>

for more info you can see the angularJS directive's documentation here: https://docs.angularjs.org/guide/directive

but i agree with the folks above me that in this case, you probably just need to use ng-class (that is also a directive).

Simply can I add like this ? `
` Does it work?
– laz Jan 22 '18 at 10:33 — laz, Jan 22 '18 at 10:33
yes, if your directive's restrict attribute is 'A' . – Yaniv Okev Feb 05 '18 at 13:43 — Yaniv Okev, Feb 05 '18 at 13:43

score -2 · Answer 2 · answered Jan 22 '18 at 09:38

-2

I think Yaniv's answer is what you need. But I suggest you try ng-class. In your code, you are trying to use the url so I think this might help you: How to highlight a current menu item?

answered Jan 22 '18 at 09:38

Viet Do

56
5

How to use custom directives in html

2 Answers2