改好点可以改成权限菜单的例子,
<html> <head> <link rel="stylesheet" type="text/css" href="bootstrap-combined.min.css"> <script type="text/javascript" src="../angular.js"></script> <script type="text/javascript" src="../angular-resource.js"></script> <script type="text/javascript"> var myApp =angular.module('components', ['ngResource']); myApp.controller("myCtrl", function($scope,$resource) { $scope.pdivs = []; $scope.msg = "grapecity team blog"; var res=$resource('/ng/menu.txt/:userId', {userId:'@id'}); res.get({id:'123'}, function(data){ console.log("controller--res:"+data.user_id+" "+data.menu); $scope.pdivs=data.menu; }, function(err){console.log(err);}); }); myApp.directive('tabs', function($resource) { var this_res=$resource; return { restrict: 'E', transclude: true, scope: {}, controller: [ "$scope", function($scope) { var panes = $scope.panes = []; $scope.select = function(pane) { angular.forEach(panes, function(pane) { pane.selected = false; }); pane.selected = true; } this.addPane = function(pane) { if (panes.length == 0) $scope.select(pane); panes.push(pane); console.log("panes.size:"+panes.length); } }], template: '<div class="tabbable">' + '<ul class="nav nav-tabs">' + '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+ '<a href="" ng-click="select(pane)">{{pane.title}}</a>' + '</li>' + '</ul>' + '<div class="tab-content" ng-transclude></div>' + '</div>', replace: true }; }); myApp.directive('pane', function() { return { require: '^tabs', restrict: 'E', transclude: true, scope: { title: '@' }, link: function(scope, element, attrs, tabsCtrl) { tabsCtrl.addPane(scope); }, template: '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' + '</div>', replace: true }; }) </script> </head> <body ng-app="components" ng-controller="myCtrl"> <h3>BootStrap Tab Component {{}}</h3> <tabs> <pane title="{{pdiv.name}}" ng-repeat="pdiv in pdivs"> <div >This is the content of the first tab.</div> </pane> </tabs> </body> </html>
resource使用的menu.txt为
{ "user_id":123, "menu":[{"name":"menu1"},{"name":"menu2"},{"name":"menu3"}] }
angular-resource.js
angular.js官网下载吧
bootstrap-combined.min.css也官网下吧