Paniermehl im Winkel

Question

Ich möchte Angular's breadcrumb capability verwenden. Ich habe diese Javascript-Datei meinem Service-Ordner hinzugefügt.

Ich habe ein div zu meiner Datei header.html hinzugefügt, um das Javascript aufzurufen. Nach Angular sollte die div wie folgt aussehen:

<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> 

Die div erstellt wird, und wenn ich es überprüfen Ich sehe
<!-- ngRepeat: breadcrumb in breadcrumbs.getAll() -->

Aber keine Brotkrumen. Irgendwelche Ideen?

Answer 1

Es reicht nicht aus, nur den HTML-Code zu Ihrer Header-Vorlagendatei hinzuzufügen. Stellen Sie sicher, dass Sie auch die folgenden abgeschlossen haben:

1. breadcrumbs.js in Ihrem Haupt-HTML-Template-Include (normalerweise index.html):

   <script type="text/javascript" src="your-project-folder/services/breadcrumbs.js"></script> 
   

2. Fügen Sie für Ihre Haupt-App services.breadcrumbs als Modul-Abhängigkeit:

   angular.module('myMainApp', ['services.breadcrumbs']); 
   

3. Schließlich stellen Sie sicher, dass Sie tatsächlich die breadcrumbs Dienst in Ihrem Controller injizieren, ein d befestigen ihn dann auf $ -umfang:

   angular.module('myMainApp').controller('FooBarCtrl', function($scope, breadcrumbs) { 
       $scope.breadcrumbs = breadcrumbs; 
   
       // ... other controller logic ... 
   }); 
   

Sie können die Durchführung der Schritte 2 und 3 in dem Winkel app Projekt in the app.js file (siehe Linien 6, 60 und 62) sehen.