一番探索后终于找到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;
}