Angular.js实现折叠按钮的经典指令.

Posted 人在钱途

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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实现折叠按钮的经典指令.的主要内容，如果未能解决你的问题，请参考以下文章

Angular JS - 单击按钮从指令加载模板 html

折叠使用 Angular js ng-repeat 和过滤器创建的 div

Angular.js 使用获取验证码按钮实现-倒计时

Angular.js 和 Fabric.js：一旦代码移动到 Angular 指令，Fabric 画布就会改变行为

将 PayPal 结帐按钮的样式更改为 Angular.js 组件？

angularjs使用angular搭建PC端项目，开关按钮