`
haoningabc
  • 浏览: 1444760 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

angular指令菜单的例子

javascriptangularjs 
阅读更多
ng.html
改好点可以改成权限菜单的例子， 
<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也官网下吧
分享到：
| websocket传传图片
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics