Angular JS 麵包屑

標籤：angular   oca   驚嘆號   efi   service   ini   provider   tool   頁面   

一、先自訂一個指令

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 麵包屑