refactor(ncyBreadcrumb): use ngSwitch directive in bootstrap3 template

Shorter pre-defined `bootstrap3` template by using the ngSwitch directive. It couldn't be applied to the `bootstrap2` template because of the separator span (involving 2 elements with the same ngSwitchWhen value, not allowed) Closes #21
ncuillery · Jun 23, 2014 · 211595e · 211595e
1 parent c57774b
commit 211595e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 19 deletions.
diff --git a/dist/angular-breadcrumb.js b/dist/angular-breadcrumb.js
@@ -1,4 +1,4 @@
-/*! angular-breadcrumb - v0.2.1-dev-2014-06-18
+/*! angular-breadcrumb - v0.2.1-dev-2014-06-23
 * https://github.com/ncuillery/angular-breadcrumb
 * Copyright (c) 2014 Nicolas Cuillery; Licensed MIT */
 
@@ -159,11 +159,9 @@ function BreadcrumbDirective($interpolate, $breadcrumb, $rootScope) {
             '</li>' +
             '</ul>',
         bootstrap3: '<ol class="breadcrumb">' +
-            '<li ng-repeat="step in steps | limitTo:(steps.length-1)">' +
-            '<a href="{{step.ncyBreadcrumbLink}}">{{step.ncyBreadcrumbLabel}}</a> ' +
-            '</li>' +
-            '<li ng-repeat="step in steps | limitTo:-1" class="active">' +
-            '<span>{{step.ncyBreadcrumbLabel}}</span>' +
+            '<li ng-repeat="step in steps" ng-class="{active: $last}" ng-switch="$last">' +
+            '<a ng-switch-when="false" href="{{step.ncyBreadcrumbLink}}">{{step.ncyBreadcrumbLabel}}</a> ' +
+            '<span ng-switch-when="true">{{step.ncyBreadcrumbLabel}}</span>' +
             '</li>' +
             '</ol>'
     };

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
@@ -154,11 +154,9 @@ function BreadcrumbDirective($interpolate, $breadcrumb, $rootScope) {
             '</li>' +
             '</ul>',
         bootstrap3: '<ol class="breadcrumb">' +
-            '<li ng-repeat="step in steps | limitTo:(steps.length-1)">' +
-            '<a href="{{step.ncyBreadcrumbLink}}">{{step.ncyBreadcrumbLabel}}</a> ' +
-            '</li>' +
-            '<li ng-repeat="step in steps | limitTo:-1" class="active">' +
-            '<span>{{step.ncyBreadcrumbLabel}}</span>' +
+            '<li ng-repeat="step in steps" ng-class="{active: $last}" ng-switch="$last">' +
+            '<a ng-switch-when="false" href="{{step.ncyBreadcrumbLink}}">{{step.ncyBreadcrumbLabel}}</a> ' +
+            '<span ng-switch-when="true">{{step.ncyBreadcrumbLabel}}</span>' +
             '</li>' +
             '</ol>'
     };
@@ -208,14 +206,14 @@ function BreadcrumbDirective($interpolate, $breadcrumb, $rootScope) {
                     deregisterWatchers();
                     var viewScope = $breadcrumb.$getLastViewScope();
                     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(viewScope);
+                    angular.forEach(scope.steps, function (step) {
+                        if (step.data && step.data.ncyBreadcrumbLabel) {
+                            var parseLabel = $interpolate(step.data.ncyBreadcrumbLabel);
+                            step.ncyBreadcrumbLabel = parseLabel(viewScope);
                             // Watcher for further viewScope updates
-                            registerWatchers(parseLabel, viewScope, value);
+                            registerWatchers(parseLabel, viewScope, step);
                         } else {
-                            value.ncyBreadcrumbLabel = value.name;
+                            step.ncyBreadcrumbLabel = step.name;
                         }
                     });
                 };