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实现折叠按钮的经典指令.

最新文章

热门文章