(编辑:jimmy 日期: 2024/10/9 浏览:2)
标题定的是angularjs与bootstrap相结合实现手风琴菜单,其实也就是用的bootstrap的样式。
在上篇文章给大家介绍了Angular.js与Bootstrap相结合实现表格分页代码。接着学习实现的Demo。
主要练习自定义指令,向指令中传递参数,老规矩先上效果图:
<my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page>
上面是我自定义的指令,菜单存在标题和内容3条用了 ng-repeat来渲染。
指令基本API如下:
app.directive('myDirective',function(){ return { //restrict: 默认为A(属性,默认值)<div my-directive=''></div> E(元素)C(类名)M(注释) //这里考虑到浏览器的兼容性通常我们用所有浏览器都认识的A类型 restrict: 'A', //优先级设置,默认是0,较大的优先调用 priority: 0, //这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会被执行。 terminal: false, //字符串或函数: 字符串<a></a>(指令内容) //注:必须存在一个根DOM元素 //一个可以接受两个参数的函数,参数为tElement和tAttrs,并返回一个代表模板的字符串 //function(tElement, tAttrs) { ... } template: '', //从指定的url地址加载模板 templateUrl: '', //如果设置了这个参数,值必须为true replace: false, //指定指令的作用域 scope:'', // transclude:'', //string //function(scope, element, attrs, transclude, otherInjectables) { ... } controller:'', // controllerAs: '', // require: '', //以编程的方式操作DOM,包括添加监听器等 link: function postLink(scope, iElement, iAttrs) {}, // compile: // 返回一个对象或连接函数,如下所示: function(tElement, tAttrs, transclude) { return { pre: function(scope, iElement, iAttrs, controller) { }, post: function(scope, iElement, iAttrs, controller) { } } // 或者 return function postLink() { } }; }; })
如何切换的时候让其他的隐藏呢,这里主要用到指令ng-show,记录当前点击的,来隐藏其他的。
具体代码注释如下:
<style type="text/css"> .con { margin: 0 auto; width: 600px; margin-top: 100px; } .panel { width: 580px; } .panel-heading { cursor: pointer; } </style> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" /> <div class="con" ng-app="myApp" ng-controller="myCtrl"> <my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page> </div> <script src="/UploadFiles/2021-04-02/angular.js">