Angular JS 面包屑

Posted 2020-10-05 saygoodnight

一、先自定义一个指令

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‘);
	}
})();