angularjs学习笔记3-directive中scope的绑定修饰符
在angularjs中，一个directive返回一个对象，对象存在很多属性，并且可以在directive中自定义自己的scope，而使用自己的scope是为了防止一个directive被使用在多个地方之间发生相互影响，通常这个scope可以被定义为true或者对象，当这个scope被定义为true时，代表这个指令拥有独立的scope，它被多次使用在多个地方之间不会相互影响，例如：
HTML代码
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
<hello></hello>
<hello></hello> </body>
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="IsolateScope.js"></script>
</html>
js代码
var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
return {
restrict: 'AE',
//这里是创建了一个独立的scope，以防止各个指令之间相互影响
scope:true,
template: '<div><input type="text" ng-model="userName"/>{{userName}}</div>',
replace: true
}
});
演示效果：
你会发现这两个指令之间输入没有互相影响。当你不指定这个directive中的scope属性的时候，例如这样
var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
return {
restrict: 'AE',
//这里是创建了一个独立的scope，以防止各个指令之间相互影响
// scope:true,
template: '<div><input type="text" ng-model="userName"/>{{userName}}</div>',
replace: true
}
});
那么显示效果如下：
操作其中一个input，那么任何使用这个指令的地方都会被修改。即这个指令的多个实例之间是共享一个 scope的
scope也可以被设定为一个对象，即{},当设定为空对象{}的时候，效果和设置为true一样，这里可以通过将其设定为不为空的对象以达到复用其对应controller中的属性及方法。
要复用其对应controller(即其父scope)中的方法和对象，angular提供了三种修饰符：
第一种为：@，这表示绑定的是一个字符串，而且是单向绑定
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
<drink flavor="{{ctrlFlavor}}"></drink>
</div>
</body>
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="ScopeAt.js"></script>
</html>
js 代码
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.ctrlFlavor="111";
}])
myModule.directive("drink", function() {
return {
restrict:'AE',
//这里的
scope:{
//@表示把当前属性作为字符串进行绑定
flavor:'@'
},
template:"<div>{{flavor}}</div>"
}
});
首先这个指令会将HTML中的drink标签替换为"<div>{{flavor}}</div>"，而原HTML的<drink flavor="{{ctrlFlavor}}"></drink>存在一个flavor的属性，指定其绑定了一个表达式，而directive中又指定了这个表达式是个字符串 scope:{flavor:'@'},这就将drink标签的flavor属性指向了其对应的controller即MyCtrl中的scope中的ctrlFlavor上，这样directive就复用了其controller中的一个属性，但是这种复用或者叫绑定是单向的，只有controller发生改变directive内容才会改变，显示效果如下：
这是第一种修饰符@的作用，简单来就是让directive可以单向绑定其父scope中的属性；
第二种修饰符是=，表示绑定的是其父scope中的属性，但是是双向绑定，代码如下：
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
Ctrl:
<br>
<input type="text" ng-model="ctrlFlavor">
<br>
Directive:
<br>
<drink flavor="ctrlFlavor"></drink>
</div>
</body>
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="ScopeEqual.js"></script>
</html>
js代码：
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.ctrlFlavor="111";
}])
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
flavor:'='
},
template:'<input type="text" ng-model="flavor"/>'
}
});
这里将flavor依然指向的是其controller的scope中的ctrFlavor属性，但是进行模板替换的时候使用的是ng-model 用来进行双向数据操作，注意到 scope:{flavor:'='},这说明这个directive的flavor属性进行了一个双向绑定，而对应的html中不再是使用{{}}这种单向绑定了，而是直接将这个<drink flavor="ctrlFlavor"></drink>属性指向了controller中的scope中的ctrlFlavor属性，简单来讲，就是利用=修饰符，你可以让你的directive与其父作用域中的某个属性进行双向绑定；
第三种修饰符是&，它的含义是用来绑定directive父作用域中的某个函数，代码如下：
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
<greeting greet="sayHello(name)"></greeting>
<greeting greet="sayHello(name)"></greeting>
<greeting greet="sayHello(name)"></greeting>
</div>
</body>
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="ScopeAnd.js"></script>
</html>
js代码
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.sayHello=function(name){
alert("Hello "+name);
}
}])
myModule.directive("greeting", function() {
return {
restrict:'AE',
scope:{
greet:'&'
},
template:'<input type="text" ng-model="userName" /><br/>'+
'<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>'
}
});
在这里，directive中的scope中设定一个属性为 scope:{ greet:'&'},&代表这个指令的greet属性绑定了其父scope中的一个函数，而在HTML中<greeting greet="sayHello(name)"></greeting>greet指向的是其父scope(即controller)的sayHello方法，并传递一个参数name,同时在模板替换中，将ng-click设定为greet属性对应的值，这里传递的参数是一个对象ng-click="greet({name:userName})"，这种写法是用来收集input中输入的值。
angularjs学习笔记3-directive中scope的绑定修饰符的更多相关文章
- AngularJS学习笔记之directive—scope选项与绑定策略
From:http://www.linuxidc.com/Linux/2015-05/116924.htm scope:{}使指令与外界隔离开来,使其模板(template)处于non-inherit ...
- AngularJS学习笔记之directive——scope选项与绑定策略
开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细 ...
- AngularJs学习笔记（3）——scope
AngularJS启动并生成视图时,会将根ng-app元素同$rootScope进行绑定. $rootScope是所有$scope对象的最上层,是AngularJS中最接近全局作用域的对象 . 一个n ...
- Java基础学习笔记(四) - 认识final关键字、权限修饰符和内部类
一.final关键字 为什么要使用 final 关键字? 通过继承我们知道,子类可以重写父类的成员变量和方法.final 关键字可以用于修饰父类,父类成员变量和方法,使其内容不可以被更改. 1.被修饰 ...
- Java学习笔记（4）--- 变量类型，修饰符
1.变量类型: a.定义: 和C++差不多,就是: type identifier [ = value][, identifier [= value] ...]: type为Java数据类型.iden ...
- angularjs学习笔记三——directive
AngularJS 通过被称为 指令 的新属性来扩展 HTML. 正如你所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性. HTML5 允许扩展的(自制的)属性,以 data- ...
- AngularJS学习笔记(一) 关于MVVM和双向绑定
写在前面: 因为需要开始学习ng,之前在知乎上听大神们介绍ng的时候说这个坑如何的大,学了一阵(其实也就三天),感觉ng做的很大很全,在合适的情境你可以完全使用ng搞定一切.这一点从诸如jqLite之 ...
- AngularJS学习笔记（三）数据双向绑定
双向绑定 双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听.数据同步上,关于双向更新,可看下图: 下面,我们通过代码来实现.先不要纠 ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
随机推荐
- Linux和windows下检查jsp后门文件的方法
Linux下: find . -name "*.jsp" | xargs egrep -liw "createNewFile| File\(| File |applica ...
- 版本号中Snapshot的含义
Maven中建立的依赖管理方式基本已成为Java语言依赖管理的事实标准,Maven的替代者Gradle也基本沿用了Maven的依赖管理机制.在Maven依赖管理中,唯一标识一个依赖项是由该依赖项的三个 ...
- 【TYVJ】P1038 忠诚
[算法]线段树 #include<cstdio> #include<algorithm> using namespace std; ]; ,inf=0x3f3f3f3f; in ...
- 基本控件文档-UILabel属性---iOS-Apple苹果官方文档翻译
本系列所有开发文档翻译链接地址:iOS7开发-Apple苹果iPhone开发Xcode官方文档翻译PDF下载地址 //转载请注明出处--本文永久链接:http://www.cnblogs.com/ ...
- React组件生命周期小结
React组件生命周期小结 下面所写的,只适合前端的React.(React也支持后端渲染,而且和前端有点小区别,不过我没用过.) 相关函数 简单地说,React Component通过其定义的几个函 ...
- 如何修改或美化linux终端
先丢一张效果图: 如何让您的 LD 的终端更具个性呢?首先,我们需要了解下面几点知识.A:配置文件 个人配置文件:~/.bashrc全局设定文件:/etc/bash.bashrc(修改需要管理员权限) ...
- 【EverydaySport】健身笔记——静态牵拉
静态牵拉一般在运动后进行,可以有效的提高肌肉的柔韧性和关节的灵活性,预防和缓解疼痛. 每个动作达到自己活动范围的最大,有牵拉感即说明有效,静态保持至少30秒,切勿震荡,进行2组. 1 大腿前群牵拉 2 ...
- 再议perl写多线程端口扫描器
再议perl写多线程端口扫描器 http://blog.csdn.net/sx1989827/article/details/4642179 perl写端口多线程扫描器 http://blog.csd ...
- 神奇JavaScript框架---Top5
前言 个人观点,供您参考 观点源自作者的使用经验和日常研究 排名基于框架的受欢迎度, 语法结构, 易用性等特性 希望大家能够基于此视频找到最适合自己的框架 下面介绍的都是严格的前端框架和库 前言 To ...
- ServerSocket和Socket通信
服务器端: 1.服务器端建立通信ServerSocket对象,并设置端口号 2.服务器建立Socket接收客户端连接 3.建立IO输入流读取客户端发送的数据 4.建立IO输出流向客户端输出数据 客户端 ...