angularjs之简单面包屑

一番探索后终于找到angularjs中比较简单的面包屑实现方法

简要说明：

1.使用到ng

a,ng-include 指定在此节点加载模板页面

b,src 注意相同样色的部分要保持名称一致，名称可以随意，意思是说要把click得到的html加载到那里去；

c.ng-click 点击事件，加载模板

d.ng-class(用来控制选中的样式的)

直接上代码吧

1.html

<div ng-controller="BtnCtrl">
		<button ng-class="{'btn':showbase}"    ng-click="show('hello');currentTpl2='hello.html'"   >基本信息{{showbase}}</button>
		<button ng-class="{'btn':showposition}" ng-click="show('list');currentTpl2='list.html'"    >任职记录{{showposition}}</button>
		<button ng-class="{'btn':showpunish}" ng-click="show('punish');currentTpl2='hello.html'"   >处罚记录{{showpunish}}</button>
		<div  ng-include src="currentTpl2"></div>
</div>

 2.controller.js

app.controller('BtnCtrl', ['$scope', function($scope){
	$scope.showbase=true;
	$scope.showposition=false;
	$scope.showpunish=false;
	$scope.show = function(label){
		switch (label){
				case'hello':
					$scope.showbase=true;
					$scope.showposition=false;
					$scope.showpunish=false;
					break;
				case 'list':
					$scope.showbase=false;
					$scope.showposition=true;
					$scope.showpunish=false;
					break;
				case 'punish':
					$scope.showbase=false;
					$scope.showposition=false;
					$scope.showpunish=true;
					break;
				default :
					$scope.showbase=true;
					$scope.showposition=false;
					$scope.showpunish=false;
					break;
			}
	};
}]);

 1.directive.js（本想用指令来实现dom控制，但是没有成功，值是变了，但页面并没有重新渲染）

app.directive('showbtn',function(){
	return function($scope,element,attrs){
		element.bind('click',function(){
			var label = attrs.type;
			switch (label){
				case'hello':
					$scope.showbase=true;
					$scope.showposition=false;
					$scope.showpunish=false;
					break;
				case 'list':
					$scope.showbase=false;
					$scope.showposition=true;
					$scope.showpunish=false;
					break;
				case 'punish':
					$scope.showbase=false;
					$scope.showposition=false;
					$scope.showpunish=true;
					break;
				default :
					break;
			}
			$scope.show();
		});
		
			
	}
});

2.html

	<div ng-controller="BtnCtrl">
		<button ng-class="{'btn':showbase}"     showbtn >基本信息{{showbase}}</button>
		<button ng-class="{'btn':showposition}" showbtn >任职记录{{showposition}}</button>
		<button ng-class="{'btn':showpunish}"   showbtn >处罚记录{{showpunish}}</button>
	</div>

 3.css 公用

.btn{
		background-color: green;
	}