angular指令菜单的例子

最新推荐文章于 2021-03-11 17:47:09 发布

linux内核控

最新推荐文章于 2021-03-11 17:47:09 发布

阅读量302

点赞数

分类专栏： angularjs 文章标签： javascript angularjs ViewUI

本文链接：https://blog.csdn.net/leafrenchleaf/article/details/84759159

版权

angularjs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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也官网下吧

linux内核控

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录