标签：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 oca 感叹号 efi service ini provider tool 页面
原文地址：http://www.cnblogs.com/saygoodnight/p/7459028.html
