Breadcrumbs in Angular
It's not enough to just add the HTML to your header template file. Make sure you've also completed the following:
-
Include
breadcrumbs.js
in your main HTML template (usually index.html):<script type="text/javascript" src="your-project-folder/services/breadcrumbs.js"></script>
-
Include
services.breadcrumbs
as a module dependency for your main app:angular.module('myMainApp', ['services.breadcrumbs']);
-
Finally, make sure you actually inject the
breadcrumbs
service into your controller, and then attach it to $scope:angular.module('myMainApp').controller('FooBarCtrl', function($scope, breadcrumbs) { $scope.breadcrumbs = breadcrumbs; // ... other controller logic ... });
You can see the implementation of Steps 2 and 3 in the angular-app project in the app.js file (refer to lines 6, 60, and 62).
Edison
Updated on July 09, 2022Comments
-
Edison almost 2 years
I want to use Angular's breadcrumb capability. I added this javascript file to my services folder.
I added a div to my header.html file to call the javascript. According to Angular, the div should look like this:
<div> <ul class="breadcrumb"> <li ng-repeat="breadcrumb in breadcrumbs.getAll()"> <span class="divider">/</span> <ng-switch on="$last"> <span ng-switch-when="true">{{breadcrumb.name}}</span> <span ng-switch-default><a href="{{breadcrumb.path}}">{{breadcrumb.name}}</a></span> </ng-switch> </li> </ul> </div>
The div is being created, and when I inspect it I see
<!-- ngRepeat: breadcrumb in breadcrumbs.getAll() -->
But no breadcrumbs. Any ideas?
-
MZaragoza over 9 yearsThanks this is just what i was looking for