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---->FrameLayout布局方式

    main.xml布局代码分析-->实现一个渐变图案 <?xml version="1.0" encoding="utf-8"?> <Fr ...

  2. Allegro PCB -如何做自定义焊盘

    1.如何创建自定义焊盘,比如这种形状的焊盘. (1).打开PCB Editor –>Allegro PCB Design ->New,在类型中选择Shape symbol,并输入名字,比如 ...

  3. Codeforces Round #364 (Div. 2)C. They Are Everywhere（尺取法）

    题目链接: C. They Are Everywhere time limit per test 2 seconds memory limit per test 256 megabytes input ...

  4. GetEnvironmentVariable 获取常用系统变量（转）

    源:GetEnvironmentVariable 获取常用系统变量 //譬如 WINDIR 表示系统目录系统变量, 以这样获: var s:string; begin s:=GetEnvironmen ...

  5. wget获取https资源

    使用wget获取 https资源,缺省命令下是要使用证书,如果还未安装证书,可以选择忽略. 例如没有github.com的证书,执行如下命令 mkdir -p model cd model wget ...

  6. highcharts第一篇---简介和使用

    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.HighCh ...

  7. Varnish CentOS 6.4 x64

    CentOS 6.4 x64 Varnish 安装配置     Varnish的官方网址为http://varnish-cache.org   首先下载Varnish 稳定版本3.0.3   wget ...

  8. 5、手把手教你Extjs5(五)使用图标字体来美化按钮)

    sencha 的例子中,有使用图标字体来美化按钮的例子,这个用起来又方便风格又统一,例如下图: 上面图标字体的使用方法也很简单,只要下载Font Awesome的css和图标文件,放到项目里就可以了. ...

  9. laravel database的事务函数

    laravel的事务使用如下: DB::connection('gvideo')->transaction(function () use ($user_id, $video_id, $acti ...

  10. iOS 8自定义动画转场上手指南

    原文:http://www.cocoachina.com/ios/20150126/11011.html iOS 5发布的时候,苹果针对应用程序界面的设计,提出了一种全新的,革命性的方法—Storyb ...