首页 > 代码库 > Angular.js实现折叠按钮的经典指令.
Angular.js实现折叠按钮的经典指令.
var expanderModule=angular.module(‘expanderModule‘,[])expanderModule.directive(‘expander‘,function(){ return{ restrict:‘EA‘, replace:true, transclude:true, scope:{ title:‘=expanderTitle‘ }, template:‘<div>‘+‘<div class="title" ng-click="toggle()">{{title}}</div>‘ +‘<div class="body" ng-show="showMe" ng-transclude></div>‘+‘</div>‘, link:function(scope,element,attrs){ scope.showMe=false; scope.toggle=function toggle(){ scope.showMe=!scope.showMe; } } }});expanderModule.controller(‘SomeController‘,function($scope){ $scope.title=‘点击展开‘; $scope.text=‘这里是内部的内容‘;});
<!DOCTYPE html><html lang="en" ng-app=‘expanderModule‘><head> <meta charset="UTF-8"> <title>Angular.js</title></head><style type="text/css"> .expander { border: 1px solid black; width: 250px; } .expander>.title { background-color: black; color: white; padding: .1em .3em; cursor: pointer; } .expander>.body { padding: .1em .3em; }</style><body> <div ng-controller=‘SomeController‘> <expander class=‘expander‘ expander-title=‘title‘ ng-cloak> {{text}} </expander> </div> <script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="Angular.js"></script><script src="angular-route.js"></script><script type="text/javascript" src="test.js"></script></body></html>
Angular.js实现折叠按钮的经典指令.
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。