Angular 中的面包屑 [英] Breadcrumbs in Angular
问题描述
我想使用 Angular 的面包屑功能一>.我将此 javascript 文件添加到我的服务文件夹中.
我在 header.html 文件中添加了一个 div 来调用 javascript.根据 Angular,div 应该是这样的:
<ul class="面包屑"><li ng-repeat="面包屑中的面包屑.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>
正在创建 div,当我检查它时,我看到<!-- ngRepeat:breadcrumbs.getAll() 中的面包屑 -->
但是没有面包屑.有什么想法吗?
仅将 HTML 添加到标头模板文件是不够的.确保您还完成了以下操作:
在主 HTML 模板(通常是 index.html)中包含
breadcrumbs.js
:<script type="text/javascript" src="your-project-folder/services/breadcrumbs.js"></script>
包括
services.breadcrumbs
作为主应用程序的模块依赖项:angular.module('myMainApp', ['services.breadcrumbs']);
最后,确保您确实将
breadcrumbs
服务注入到您的控制器中,然后将其附加到 $scope:angular.module('myMainApp').controller('FooBarCtrl', function($scope, breadcrumbs) {$scope.breadcrumbs = 面包屑;//... 其他控制器逻辑 ...});
在angular-app项目中可以看到第2步和第3步的实现在 app.js 文件中(参考第 6、60 和 62 行).
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?
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).
这篇关于Angular 中的面包屑的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!