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;
	}