zoukankan html css js c++ java

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>

查看全文

相关阅读:
垃圾收集器
 垃圾收集算法
 JVM内存模型
 工厂方法模式
 类加载机制
 六大设计原则
 单例模式
 HFish开源蜜罐搭建
 利用metasploit复现永恒之蓝
 零信任网络初识

原文地址：https://www.cnblogs.com/kangshuai/p/5841783.html