一、先自定义一个指令
angular.module(‘app‘) ???????.directive(‘breadcrumbs‘, breadcrumbs) // 面包屑function breadcrumbs() { ???????return { ???????????restrict: ‘AE‘, ???????????replace: true, ???????????scope: { ???????????????links: ‘=‘ ???????????}, ???????templateUrl:‘template/breadcrumbs.html‘, ???????????link: function(scope, ele, attr) { ???????????????console.log(scope.links); ???????????????scope.linksList = scope.links; ???????????} ???????}; ???}二、指令模板HTML
<div class="breadcrumbs"><ul><li ng-repeat="item in linksList[‘data‘]"><a ui-sref="{{ item.url }}" ng-bind="item.name"></a><span>></span></li><li><em ng-bind="linksList[‘current‘]"></em></li></ul></div>三、在应用的页面HTML
<breadcrumbs links="vm.links"></breadcrumbs>
是多少
四、子页面的controller
(function() { ???‘use strict‘; ???angular ???????.module(‘app‘) ???????.controller(‘ActivityController‘, ActivityController); ???ActivityController.$inject = [‘$scope‘, ‘$stateParams‘, ‘dataService‘, ‘toolService‘]; ???function ActivityController($scope, $stateParams, dataService, toolService) { ???????var vm = this; ???????vm.init = init; // 初始化函数 ???????// 调用初始化 ???????vm.init(); ???????/* ????????* 初始化页面数据 ????????*/ ???????function init() { ???????????// 面包屑链接集定义 ???????????vm.links = { ???????????????current: ‘活动列表‘, ???????????????data: [ ???????????????????{ ???????????????????????name: ‘首页‘, ???????????????????????url: ‘home‘ ?//路由配置 ???????????????????} ???????????????] ???????????}; ???})();
五、路由配置
(function(){‘use strict‘;angular.module(‘app‘).config(routeConfig);function routeConfig($stateProvider, $urlRouterProvider, $locationProvider) { ???????// 删除url感叹号 ???????$locationProvider.hashPrefix(‘‘);//配置$stateProvider.state(‘home‘, {url: ‘/home‘,views: { ????????????????????????????????????‘‘: { ?????????????????????????????????????????templateUrl: ‘template/home.html‘, ?????????????????????????????????????????controller: ‘HomeController‘, ?????????????????????????????????????????controllerAs: ‘vm‘ ????????????????????????????????????????}, ??????????????????????????????????????} ??????????})$urlRouterProvider.otherwise(‘/home‘);}})();
Angular JS 面包屑
原文地址：http://www.cnblogs.com/saygoodnight/p/7459028.html