CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
Wicked Programmer
Wicked Programmer

Reputation: 273

How to prevent an angularJS to route?

I have a problem now in my angularJS route.

I have a scenario here that would probably help you to understand my problem.

I have a menu and a submenu in my website.

When ever the module content a url it means that menu will route by it self and dont content a submenu..

When ever the module's url is empty it should content sub menu and when i click on it, it will just open the menu to view the sub menu..

Here is my codes..

<li id="sidebar-dropdown" data-ng-repeat="mod in modulesData">
   <a href="{{mod.moduleUrl}}" data-toggle="collapse" data-target="#{{mod.moduleId}}" data-ng-click="setCurrentModule(mod)" >
  <i class="fa fa-th"></i> <span>{{mod.moduleName}}</span>
  </a>
  <ul class="collapse" id="{{mod.moduleId}}" style="list-style-type:none">
  <li class="list-group-item no-border" data-ng-repeat="sub in mod.subModule"><a href="{{sub.moduleUrl}}" data-ng-click="setCurrentModule(sub)"><i class="fa fa-th"></i> <span>{{sub.moduleName}}</span></a></li>
  </ul>
</li>

In that code i can show the sub menu upon clicking the submenu it will route to its designated URL but when i click the parent menu (supposedly event will just close the menu) it will will route to my home url and living the view of my submenu..

This is the view in my summary(submenu)

enter image description here

and when i click on the parent menu it will close the submenu but route to my home page

enter image description here

I hope anyone can help me to solve this problem..

I just want my Parent Menu take no action when it click..

Upvotes: 2

Views: 66

Answers (1)

Datz Me
Datz Me

Reputation: 955

Try to use directives:

app.directive('a', function () {
    return {
        restrict: 'E',
        link: function (scope, elem, attrs) {
            if (attrs.href === '' || attrs.href === '#') {
                elem.on('click', function (e) {
                    e.preventDefault();
                });
            }
        }
    };
});

when ever the attribute href === '' it will prevent to make take an action

Upvotes: 2

Related Questions