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{width: 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 = '这里是展开后的内容';
}]);

--@angularJS--指令之单个点击展开demo的更多相关文章

  1. 原生态js单个点击展开收缩

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. angularjs指令弹框点击空白处隐藏及常规方法

    效果图展示: 第一种方法:angularjs自定义指令: 指令: app.directive('onBlankHide', function () { return { restrict: 'A', ...

  3. angularjs指令(二)

    最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...

  4. AngularJS 指令实践指南（二）

    这个系列教程的第一部分给出了AngularJS指令的基本概述,在文章的最后我们介绍了如何隔离一个指令的scope.第二部分将承接上一篇继续介绍.首先,我们会看到在使用隔离scope的情况下,如何从指令 ...

  5. 【转】angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  6. 不用搭环境的10分钟AngularJS指令简易入门01（含例子）

    不用搭环境的10分钟AngularJS指令简易入门01(含例子) `#不用搭环境系列AngularJS教程01,前端新手也可以轻松入坑~阅读本文大概需要10分钟~` AngularJS的指令是一大特色 ...

  7. angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

  8. AngularJS 指令生命周期 complie link

    AnguarJS指令从解析到生效一共会经历Inject.Compile.Controller加载.Pre-link.Post-link这几个主要阶段. 一.AngularJS指令执行过程 1.加载An ...

  9. AngularJS指令封装高德地图组件

    1 概述 公司移动门户原来是基于AngularJS指令封装的百度地图组件,用于签到.签退.定位等功能,在使用过程中发现百度地图频繁的弹出广告,所以打算重新引用其它地图组件,最后决定基于AngularJ ...

随机推荐

  1. Android----ListView入门知识--各种Adapter配合使用

    引自:http://www.cnblogs.com/playing/archive/2011/03/21/1990555.html 在android开发中ListView是比较常用的组件,它以列表的形 ...

  2. git版本控制（一）

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  3. 继续几道经典的js题（局部和全局变量，对象等）

    1. //现有代码如下:var foo = 1;function main(){alert(foo);var foo = 2;alert(this.foo)this.foo = 3;}//1.请给出以 ...

  4. git分支综述

    对git不是很熟悉,有个问题要弄清楚一下. 假如远程仓库有 dev 和 master 两个分支,master 作为一个稳定版分支,可用于直接发布产品,日常的开发则 push 到 dev 分支,那我本地 ...

  5. CodeForces 598E Chocolate Bar

    区间DP预处理. dp[i][j][k]表示大小为i*j的巧克力块,切出k块的最小代价. #include<cstdio> #include<cstring> #include ...

  6. 编写一个python脚本功能-备份

    版本一 解决方案当我们基本完成程序的设计,我们就可以编写代码了,它是对我们的解决方案的实施.版本一例10.1 备份脚本——版本一 #!/usr/bin/python # Filename: backu ...

  7. storybody中页面跳转

    - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{ if ([segue.destinationViewCont ...

  8. URL与String转换

    NSString *str = @"www.baidu.com"; NSURL *URL = [NSURL URLWithString:str];  //string>url ...

  9. 常见div+css网页布局（float,absolute）

    网页布局-常见 1,           float布局 (1)常规方法 <div id="warp">     <div id="column&quo ...

  10. S3C2440硬件IIC详解

    S3C2440A RISC微处理器可以支持一个多主控IIC 总线串行接口.一条专用串行数据线(SDA)和一条专用串行时钟线(SCL)传递连接到IIC总线的总线主控和外设之间的信息.SDA和SCL线都为 ...