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. http 安全验证

    今天升级Xcode 7.0 bata发现网络访问失败.输出错误信息 The resource could not be loaded because the App Transport Securit ...

  2. libevent和libev的区别对比(二）

    之前有一篇文章描述过一些对比: http://www.cnblogs.com/charlesblc/p/6078029.html 这里在代码和应用方面再说一下. 看一下两边的Helloworld基本就 ...

  3. (中等) CF 576D Flights for Regular Customers (#319 Div1 D题)，矩阵快速幂。

    In the country there are exactly n cities numbered with positive integers from 1 to n. In each city ...

  4. Delphi 悬浮窗口、浮动窗口的实现

    源:Delphi 悬浮窗口.浮动窗口的实现 浮动窗体的实现 http://blog.tianya.cn/blogger/post_show.asp?BlogID=68097&PostID=80 ...

  5. CollectionView中deleteItems方法的使用

    最近在做一个批量删除照片的功能,调用了 deleteItems这个方法,但是使用这个方法之后程序崩溃,报错:You need to also delete associated data from t ...

  6. 变量-数据类型-对象-如何编写python脚本

    标识符的命名规则变量是标识符的例子. 标识符 是用来标识 某样东西 的名字.在命名标识符的时候,你要遵循这些规则:标识符的第一个字符必须是字母表中的字母(大写或小写)或者一个下划线(‘ _ ’).标识 ...

  7. RSA----实际函数库选择

    需求:对字符串加密 加密后不要超过这个字符串的长度,最好是1半的长度. 非对称算法. 重复度一定要低 1使用RSA加密 1   rsaeuro 2openssl    参考openssl编程 3 Cr ...

  8. AWK第一篇------全面介绍

    AWK-文本流编辑器 目录 [隐藏] 1 命令行语法 2 用shell实现调用awk 3 awk语言概要 3.1 记录和字段 3.2 脚本的格式 3.3 行为终止 3.4 注释 3.5 模式 3.6  ...

  9. STM32 USB虚拟串口(转)

    源:STM32 USB虚拟串口 串口调试在项目中被使用越来越多,串口资源的紧缺也变的尤为突出.很多本本人群,更是深有体会,不准备一个USB转串口工具就没办法进行开发.本章节来简单概述STM32低端芯片 ...

  10. oracle查看表空间物理文件的名称，路径及大小

    select tablespace_name, file_id,file_name,round(bytes/(1024*1024),0) total_space from dba_data_files ...