Reduce events in dynamic menu in AngularJS? - events

Question

I've built a dynamic menu which also have highlighting. Now i got a problem, number of path-change events are increasing along with menu elements.
Of course, that's the result of applying directive on each element of the menu.
Custom directives at the moment is my most weak place, and i don't have idea how to refactor all this.
I also made an attempt to put directive in root element of menu (ul) in order to register watch once, but stuck on accessing the deep children elements (ul->li->a.href).
Here's the directive:
app.directive("testdir", function($location)
{
return {
restrict: 'A',
link: function(scope, element, attrs, controller) {
scope.$watch(function() { return $location.path(); }, function(path)
{
scope.$parent.firedEvents++;
path=path.substring(1);
if(path === element.children().attr("href").substring(2))
{
element.addClass("activeLink");
}
else
{
element.removeClass("activeLink");
}
})
}
};
And HTML Part:
<ul ng-app="test" ng-controller="MenuCtrl">
<li ng-repeat="link in menuDef" testdir>{{link.linkName}}</li>
</ul>
Whole example on JsFiddle
How this can be refactored? I'm exhausted.
and, i'm moving in the right direction? I have a feeling that this thing could be done in bit easier way, but maybe i'm wrong.

Answer 1

First of all, your firedEvents means how many time the callback has been called, not how many times the location actually changed, it's not the "number of path-change events"!
You have 20 (as in your fiddle) scopes are watching the location change, when you click on a different link other than the current active one, the location changes, ALL of the 20 scopes will see the change and call their own $watch callback functions, and each call to the callback will increase your firedEvents, so the result is what you have seen: the count goes up by 20.
Therefore, if you want to make the firedEvents to count how many time location has changed, you should move scope.$parent.firedEvents++; into the if. But keep in mind that every click will still cause the callback function be called by 20 times!
There are many ways to achieve the same effect you're trying to do here, I have a solution for you without digging into directive at all. Here you go:
HTML
<ul ng-controller="MenuCtrl">
<li ng-repeat="link in menuDef" ng-class="{activeLink: link.isActive}" ng-click="onLinkClick(link)">{{link.linkName}}
</li>
</ul>
JS
app.controller("MenuCtrl", function ($scope, $location) {
var menugen = [];
for (var i = 1; i <= 20; i++) {
menugen.push({
linkName: "Link " + i,
url: "#/url" + i
});
}
$scope.menuDef = menugen;
var activeLink = null;
$scope.onLinkClick = function (link) {
if (activeLink && $scope.activeLink !== link) {
activeLink.isActive = false;
}
link.isActive = true;
activeLink = link;
};
});
jsFiddle
Update
My first attempt is targeting simplicity, but as #VirtualVoid pointed out, it has a huge drawback -- it can't easily handle location change from outside of the menu.
Here, I came up a better solution: adding a directive to the ul, watch location change in there, and update activeLink in the callback function of the watch. In this way, one $watch is called, and only one callback will be called for a click.
JS
app.directive('menu', function ($location) {
return {
restrict: 'A',
controller: function ($scope, $location) {
var links = [];
this.registerLink = function (elem, path) {
links.push({
elem: elem,
path: path
});
};
$scope.$watch(function () {
return $location.path();
}, function (path) {
for (var i = 0; i < links.length; i++) {
if (path === links[i].path) {
links[i].elem.addClass('activeLink');
} else {
links[i].elem.removeClass('activeLink');
}
}
});
}
};
}).
directive("testdir", function () {
return {
restrict: 'A',
require: '^menu',
link: function (scope, element, attrs, controller) {
controller.registerLink(element, scope.link.url.substring(1));
}
};
});
HTML
<ul ng-app="test" ng-controller="MenuCtrl" menu>
<li ng-repeat="link in menuDef" testdir>
{{link.linkName}}
</li>
</ul>
jsFiddle: http://jsfiddle.net/jaux/MFYCX/