<div ng-controller="ctrl1">
<superman weight length speed>superman</superman>
<superman weight >weight</superman>
</div> <script type="text/javascript">
angular.module('myMoudle',[])
.controller('ctrl1', ['$scope', function($scope){ }])
.directive("superman", function(){
return {
restrict : "E",
scope : {},
controller : function($scope){
$scope.abilities = []; this.addWeight = function(){
$scope.abilities.push("Weight");
} this.addSpeed = function(){
$scope.abilities.push("Speed");
} this.addLength = function(){
$scope.abilities.push("Length");
}
},
link : function(scope, element){
element.bind("mouseenter", function(){
console.log(scope.abilities);
})
}
}
})
.directive("weight", function(){
return {
restrict : "A",
require : "superman",
link : function(scope, element, attrs, superman){
superman.addWeight();
}
}
})
.directive("speed", function(){
return {
restrict : "A",
require : "superman",
link : function(scope, element, attrs, superman){
superman.addWeight();
}
}
})
.directive("length", function(){
return {
restrict : "A",
require : "superman",
link : function(scope, element, attrs, superman){
superman.addLength();
}
}
}) </script>
解释: directive 中的controller放一些公共部分
       require : 通过require让多个指令共享controller中的数据
                 ^ 允许从父类开始查找 require:"^superman"
                 ? 如果找不到不抛出异常
scope :   {} 创建独立作用域,没有原型继承

             = or =attr “Isolate”作用域的属性与父作用域的属性进行双向绑定,任何一方的修改均影响到对方,这是最常用的方式;

              @ or @attr “Isolate”作用域的属性与父作用域的属性进行单向绑定,即“Isolate”作用域只能读取父作用域的值,并且该值永远的String类型

              & or &attr “Isolate”作用域把父作用域的属性包装成一个函数,从而以函数的方式读写父作用域的属性,包装方法是$parse;

link : 主要做一些dom操作

                 
 

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

angular 中 directive中的多个指令的更多相关文章

  1. angularJS中directive与controller之间的通信

    当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...

  2. AngularJS中Directive指令系列 - 基本用法

    参考: https://docs.angularjs.org/api/ng/service/$compile http://www.zouyesheng.com/angular.html Direct ...

  3. angularjs中directive指令与component组件有什么区别?

     壹 ❀ 引 我在前面花了两篇博客分别系统化介绍了angularjs中的directive指令与component组件,当然directive也能实现组件这点毋庸置疑.在了解完两者后,即便我们知道co ...

  4. angularJS中directive与directive 之间的通信

    上一篇讲了directive与controller之间的通信:但是我们directive与directive之间的通信呢? 当我们两个directive嵌套使用的时候怎么保证子directive不会被 ...

  5. AngularJS in Action读书笔记5(实战篇)——在directive中引入D3饼状图显示

    前言: "宁肯像种子一样等待  也不愿像疲惫的陀螺  旋转得那样勉强" 这是前几天在查资料无意间看到的一位园友的签名,看完后又读了两遍,觉得很有味道.后来一寻根究底才知这是出资大诗 ...

  6. AngularJs中,如何在父元素中调用子元素为自定义Directive中定义的函数?

    最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...

  7. AngularJS自定义Directive中link和controller的区别

    在AngularJS中,自定义Directive过程中,有时用link和controller都能实现相同的功能.那么,两者有什么区别呢? 使用link函数的Directive 页面大致是: <b ...

  8. angularJS directive中的controller和link function辨析

    在angularJS中,你有一系列的view,负责将数据渲染给用户:你有一些controller,负责管理$scope(view model)并且暴露相关behavior(通过$scope定义)给到v ...

  9. angularJS中directive父子组件的数据交互

    angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...

随机推荐

  1. photoSlider-html5原生js移动开发轮播图-相册滑动插件

    简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...

  2. python学习第四天 --字符编码 与格式化及其字符串切片

    字符编码 与格式化 第三天已经知道了字符串也是一种数据类型,但是,字符串比较特殊的是还有一个编码问题. 因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采 ...

  3. OpenCV-ubuntu-install

    1.安装一些依赖库 sudo apt-get install build-essential libgtk2.0-dev libavcodec-dev libavformat-dev libjpeg6 ...

  4. Java学习笔记--AWT事件处理

    1.事件模型 在整个事件触发和相应的过程中,主要涉及一下3类对象 (1) 事件源 : 引起时间的GUI对象,如各类组件(Button,Label,TextField),容器组件(Frame,panel ...

  5. jQuery验证表单格式

    工作之余整理一些工作中编写的代码,记录自己工作中的技术要点,便于自己记忆已经整合.以下是关于此jQuery验证的一些标记以及使用方法: 整个js代码都放入jquery_validate_1.1.0.j ...

  6. Android 隐藏输入软键盘

    //隐藏输入键盘 ((InputMethodManager)getSystemService(INPUT_METHOD_SERVICE)) .hideSoftInputFromWindow(BshTo ...

  7. 深入浅出CChart 每日一课——第十八课 女神的套娃,玩转对话框

    前面笨笨已经给大家展示了CChart编程的N个例子.这些例子中,我们的CChart图像都是绘制在程序的主窗口中的. 在很多情况下,我们面对的情形不是这样的.这节课笨笨就给大家介绍一下怎样在对话框中用C ...

  8. 关于Microsoft app下同义词的整理

    Windows os 以下词表达的是同一个概念 windows store app windows metro app windows modern app windows runtime app w ...

  9. c++在函数后面加const

    非静态成员函数后面加const(加到非成员函数或静态成员后面会产生编译错误),表示成员函数隐含传入的this指针为const指针,决定了在该成员函数中,任意修改它所在的类的成员的操作都是不允许的(因为 ...

  10. ubuntu 16.04 一些使用过程中遇到的问题

    1  安装ssh 和 openssh-server之后通过SecureCRT 可以连接,FileZilla不能使用sftp方式进行连接, 安装vsftpd后测试ftp可以连接, 修改 /etc/ssh ...