fix(ncyBreadcrumb): display the correct breadcrumb in case of direct …

…access When the breadcrumb relies on nested views, the $viewContentLoaded event used by the directive occurs many times. The event related to the deepest view (the correct one for the breadcrumb) is not necessary the last one. We use the '$id' property to get the 'lastly created' scope. Closes #10
ncuillery · May 1, 2014 · e1f455b · e1f455b
1 parent ab2ae1a
commit e1f455b
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 21 deletions.
diff --git a/dist/angular-breadcrumb.js b/dist/angular-breadcrumb.js
@@ -3,6 +3,14 @@
 * Copyright (c) 2014 Nicolas Cuillery; Licensed MIT */
 
 (function (window, angular, undefined) {
+function isAOlderThanB(scopeA, scopeB) {
+    if(angular.equals(scopeA.length, scopeB.length)) {
+        return scopeA > scopeB;
+    } else {
+        return scopeA.length > scopeB.length;
+    }
+}
+
 function $Breadcrumb() {
 
     var $$options = {
@@ -149,16 +157,21 @@ function BreadcrumbDirective($interpolate, $breadcrumb, $rootScope) {
         templateUrl: $breadcrumb.getTemplateUrl(),
         link: {
             post: function postLink(scope) {
+                var lastScopeId;
                 $rootScope.$on('$viewContentLoaded', function (event) {
-                    scope.steps = $breadcrumb.getStatesChain();
-                    angular.forEach(scope.steps, function (value) {
-                        if (value.data && value.data.ncyBreadcrumbLabel) {
-                            var parseLabel = $interpolate(value.data.ncyBreadcrumbLabel);
-                            value.ncyBreadcrumbLabel = parseLabel(event.targetScope);
-                        } else {
-                            value.ncyBreadcrumbLabel = value.name;
-                        }
-                    });
+                    // With nested views, the event occur several times, in "wrong" order
+                    if(!lastScopeId || isAOlderThanB(event.targetScope.$id, lastScopeId)) {
+                        lastScopeId = event.targetScope.$id;
+                        scope.steps = $breadcrumb.getStatesChain();
+                        angular.forEach(scope.steps, function (value) {
+                            if (value.data && value.data.ncyBreadcrumbLabel) {
+                                var parseLabel = $interpolate(value.data.ncyBreadcrumbLabel);
+                                value.ncyBreadcrumbLabel = parseLabel(event.targetScope);
+                            } else {
+                                value.ncyBreadcrumbLabel = value.name;
+                            }
+                        });
+                    }
                 });
             }
         }

diff --git a/dist/angular-breadcrumb.min.js b/dist/angular-breadcrumb.min.js
diff --git a/src/angular-breadcrumb.js b/src/angular-breadcrumb.js
@@ -1,3 +1,11 @@
+function isAOlderThanB(scopeA, scopeB) {
+    if(angular.equals(scopeA.length, scopeB.length)) {
+        return scopeA > scopeB;
+    } else {
+        return scopeA.length > scopeB.length;
+    }
+}
+
 function $Breadcrumb() {
 
     var $$options = {
@@ -112,7 +120,6 @@ function $Breadcrumb() {
             }
         };
     }];
-
 }
 
 function BreadcrumbDirective($interpolate, $breadcrumb, $rootScope) {
@@ -144,16 +151,21 @@ function BreadcrumbDirective($interpolate, $breadcrumb, $rootScope) {
         templateUrl: $breadcrumb.getTemplateUrl(),
         link: {
             post: function postLink(scope) {
+                var lastScopeId;
                 $rootScope.$on('$viewContentLoaded', function (event) {
-                    scope.steps = $breadcrumb.getStatesChain();
-                    angular.forEach(scope.steps, function (value) {
-                        if (value.data && value.data.ncyBreadcrumbLabel) {
-                            var parseLabel = $interpolate(value.data.ncyBreadcrumbLabel);
-                            value.ncyBreadcrumbLabel = parseLabel(event.targetScope);
-                        } else {
-                            value.ncyBreadcrumbLabel = value.name;
-                        }
-                    });
+                    // With nested views, the event occur several times, in "wrong" order
+                    if(!lastScopeId || isAOlderThanB(event.targetScope.$id, lastScopeId)) {
+                        lastScopeId = event.targetScope.$id;
+                        scope.steps = $breadcrumb.getStatesChain();
+                        angular.forEach(scope.steps, function (value) {
+                            if (value.data && value.data.ncyBreadcrumbLabel) {
+                                var parseLabel = $interpolate(value.data.ncyBreadcrumbLabel);
+                                value.ncyBreadcrumbLabel = parseLabel(event.targetScope);
+                            } else {
+                                value.ncyBreadcrumbLabel = value.name;
+                            }
+                        });
+                    }
                 });
             }
         }
@@ -164,4 +176,3 @@ BreadcrumbDirective.$inject = ['$interpolate', '$breadcrumb', '$rootScope'];
 angular.module('ncy-angular-breadcrumb', ['ui.router.state'])
     .provider('$breadcrumb', $Breadcrumb)
     .directive('ncyBreadcrumb', BreadcrumbDirective);
-
diff --git a/test/spec/scope-compare-test.js b/test/spec/scope-compare-test.js
@@ -0,0 +1,47 @@
+/*jshint undef: false */
+
+describe('The scope', function() {
+
+    beforeEach(function() {
+        module('ncy-basic-conf');
+    });
+
+    it('00A is older than 001', function() {
+        expect(isAOlderThanB('00A', '001')).toBe(true);
+    });
+
+    it('010 is older than 00Y', function() {
+        expect(isAOlderThanB('010', '00Y')).toBe(true);
+    });
+
+    it('01P is older than 010', function() {
+        expect(isAOlderThanB('01P', '010')).toBe(true);
+    });
+
+    it('FOO is older than BAR', function() {
+        expect(isAOlderThanB('FOO', 'BAR')).toBe(true);
+    });
+
+    it('F00 is older than BAR', function() {
+        expect(isAOlderThanB('F00', 'BAR')).toBe(true);
+    });
+
+    it('0000 is older than ZZZ', function() {
+        expect(isAOlderThanB('0000', 'ZZZ')).toBe(true);
+    });
+
+    it('(newly created) is always older than the precedent one', inject(function($rootScope) {
+        var scope = $rootScope.$new();
+        for(var i = 0; i < 100000; i++) {
+            var newScope = $rootScope.$new();
+            var isOlder = isAOlderThanB(newScope.$id, scope.$id);
+            expect(isOlder).toBe(true);
+            if(!isOlder) {
+                console.log(newScope.$id, scope.$id, isOlder, i);
+                break;
+            }
+            scope = newScope;
+        }
+    }));
+
+});