Angular.js实现折叠按钮的经典指令(亲测OK)

最新推荐文章于 2024-07-30 17:09:59 发布

weixin_30735745

最新推荐文章于 2024-07-30 17:09:59 发布

阅读量118

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhawei/p/6560634.html

版权

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>

内容不是我写，我只是搬运工！

原文：http://www.cnblogs.com/kangshuai/p/5841783.html

转载于:https://www.cnblogs.com/zhawei/p/6560634.html

weixin_30735745

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular.js实现折叠按钮的经典指令(亲测OK)

var expanderModule=angular.module('expanderModule',[])expanderModule.directive('expander',function(){ return{ restrict:'EA', replace:true, transclude:...
复制链接

扫一扫