zoukankan      html  css  js  c++  java
  • --@angularJS--指令之单个点击展开demo

    1、expander.html:

    <!DOCTYPE HTML>
    <html ng-app="app">
    <head>
        <title>单击展开demo</title>
        <meta charset="utf-8">    
        <link rel="stylesheet" href="../css/bootstrap.css">
        <script src="../js/angular.js"></script>
        <style>
        .expander{ 250px;border: 1px solid black;}
        .expander>.title{background: black;color: white;padding: .1em .3em;cursor: pointer;}
        .expander>.body{padding: .1em .3em;}
        </style>
    </head>
    <body>
    <div ng-controller="someCtrl">
        <expander class='expander' expander-title='title'>
            {{text}}
        </expander>
    </div>
    <script src="./expander.js"></script>
    </body>
    </html>

    2、expander.js:

    var myModule = angular.module("app",[]);

    myModule.directive('expander',function(){
        return {
            restrict:'AE',
            replace:true,
            transclude:true,
            scope:{
                title:'=expanderTitle'//这里绑定的是expander-title属性,而且经测试非要转成这样的小驼峰写法才可
                //=传递的是指令标签内属性expander-title值'title'的值'点击展开'($scope.title = '点击展开';)
            },
            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(){//每次点击调用此方法都让scope.showme值反转1次
                    scope.showme = !scope.showme;
                }
            }
        }
    });

    myModule.controller('someCtrl', ['$scope', function($scope){
        $scope.title = '点击展开';//这里的title是expander-title='title'中的'title'值部分的赋值;而上面指令定义中的scope{title:是template:模板中的{{title}},也就是说在指令中,title:'=expanderTitle'这句话的意思是将属性expander-title的值'title'(由控制器赋值)绑定独立作用域也就是指令内的作用域——模板中的{{title}}之上,让{{title}}和'title'同值。记住:独立作用域三大绑定策略的作用就是绑定同一个标签内的属性名传值.不同的是:@符传递是属性值字串;=号传递的是属性值的值(控制器赋予);&符传递是的属性调用的方法()
        $scope.text = '这里是展开后的内容';
    }]);

  • 相关阅读:
    python 包管理工具 pip 的配置
    Python 变量作用域 LEGB (下)—— Enclosing function locals
    Python 变量作用域 LEGB (上)—— Local,Global,Builtin
    2020 Java 面试题 小结 (答案慢慢补上,有错误请指出)
    mysql 根据日期(date)做年,月,日分组统计查询
    jvm指令
    正则表达式 分割地址 获取省市区详细地址
    .Net 异常记录
    WCF设计服务协议(一)
    plsql ORA-01789:查询块具有不正确的结果列数
  • 原文地址:https://www.cnblogs.com/koleyang/p/4520195.html
Copyright © 2011-2022 走看看