angular js 指令的数据传递 及作用域数据绑定
<div my-directive
my-url="http://google.com"
my-link-text="Click me to go to Google"></div> angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: 'A',
replace: true,
scope: {
myUrl: '@', //绑定策略 ：字符串绑定策略
myLinkText: '@' //绑定策略:
},
template: '<a href="{{myUrl}}">' +
'{{myLinkText}}</a>'
};
});
作用域数据绑定
自定义标签或者进行扩展时，会有这样的需求场景，要在标签中添加一些属性，实现一些复杂功能。
关于这些属性，独立作用域是如何的做的呢？看看下面的内容吧。
举个例子：
<xingoo say="name"></xingoo>
<xingoo say="name()"></xingoo>
假设传入的是上面这种，我们如何区分它传入的到底是变量呢？还是字符串呢？还是方法呢？
因此AngularJS有了三种自定义的作用域绑定方式：
1 基于字符串的绑定：使用@操作符，双引号内的内容当做字符串进行绑定。
2 基于变量的绑定：使用=操作符，绑定的内容是个变量。
3 基于方法的绑定：使用&操作符，绑定的内容时个方法。
首先看一下基于字符串的绑定：
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body> <div ng-controller="myAppCtrl">
<xingoo say="test string"></xingoo>
<xingoo say="{{str2}}"></xingoo>
<xingoo say="test()"></xingoo>
</div> <script type="text/javascript">
var myAppModule = angular.module("myApp",[]); myAppModule.controller("myAppCtrl",['$scope',function($scope){
$scope.str1 = "hello";
$scope.str2 = "world";
$scope.str3 = "angular";
}]); myAppModule.directive("xingoo",function(){
return {
restrict:'AE',
scope:{
say:'@'
},
template:"<div>{{say}}</div><br>",
repalce:true
}
})
</script>
</body>
</html>
看一下代码，在body中使用了三次自定义的标签，每种标签的内部有一个say的属性，这个属性绑定了一个双引号的字符串。
在指令的定义中，添加了scope:{say:'@'}这个键值对属性，也就是说，angular会识别say所绑定的东西是一个字符串。
在模板中，使用表达式{{say}}输出say所表示的内容。
可以看到，双引号内的内容都被当做了字符串。当然{{str2}}表达式会被解析成对应的内容，再当做字符串。
如果绑定的是一个变量呢！
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body> <div ng-controller="myAppCtrl">
ctrl:<input type="text" ng-model="testname"><br>
directive:<xingoo name="testname"></xingoo>
</div> <script type="text/javascript">
var myAppModule = angular.module("myApp",[]); myAppModule.controller("myAppCtrl",['$scope',function($scope){
$scope.testname="my name is xingoo";
}]); myAppModule.directive("xingoo",function(){
return {
restrict:'AE',
scope:{
name:'='
},
template:'<input type="text" ng-model="name">',
repalce:true
}
})
</script>
</body>
</html>
在上面的代码中，可以看到
1 在控制器myAppCtrl对应的div中，定义了一个变量ng-model —— testname。
2 testname对应的是输入框中输入的值。
3 然后把这个变量当做一个参数传递给xingoo这个标签的name属性。
4 在xingoo标签中，又把这个name绑定到模板中的一个输入框内。
最终两个输入框的内容被连接起来，无论改变哪一个输入框内的值，testname与name都会发生改变。
通过下面这张图可以看出来：
在指令中通过scope指定say绑定规则是变量的绑定方式。
最终通过xingoo标签内的属性依赖关系把 testname与name连接在一起：
最后是基于方法的绑定：&操作符
上面展示了基于字符串和变量的绑定方法，下面看看基于方法的绑定：
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body> <div ng-controller="myAppCtrl">
<xingoo say="sayHello(name)"></xingoo>
<xingoo say="sayNo(name)"></xingoo>
<xingoo say="sayYes(name)"></xingoo>
</div> <script type="text/javascript">
var myAppModule = angular.module("myApp",[]); myAppModule.controller("myAppCtrl",['$scope',function($scope){
$scope.sayHello = function(name){
console.log("hello !"+ name);
};
$scope.sayNo = function(name){
console.log("no !"+ name);
};
$scope.sayYes = function(name){
console.log("yes !"+ name);
};
}]); myAppModule.directive("xingoo",function(){
return {
restrict:'AE',
scope:{
say:'&'
},
template:'<input type="text" ng-model="username"/><br>'+
'<button ng-click="say({name:username})">click</button><br>',
repalce:true
}
})
</script>
</body>
</html>
这段代码中scope中的绑定规则变成了&，也就是方法绑定。
在body中，通过自定义标签传入了三个方法，分别是sayHello(name),sayNo(name),sayYes(name)，这三个方法都需要一个name变量。
在指令的定义中，模板替换成一个输入框，一个按钮：
输入框：用于输入username，也就是三个方法需要的参数name。
按钮：点击触发函数——通过绑定规则，绑定到相应的方法。
也就是说
通过say在scope中的定义，angular知道了say对应的是个方法；
通过{name:username}的关联，知道了传入的是username。
从而交给对应的方法执行。
页面效果：
参考
[1] 大漠穷求，AngularJS实战：http://www.imooc.com/video/3085/0
angular js 指令的数据传递 及作用域数据绑定的更多相关文章
- 关于vue.js父子组件数据传递
vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子: <div id="app2"> < ...
- angular view之间的数据传递
之前写过一篇backbone view之间的传递,由于现在在用angular搞开发,现在也来总结一下.在angular 传递数据通俗的讲叫做 广播 ,在一些文章中,也叫做事件的发布与订阅,在angul ...
- angular.js的post数据方式
公司的项目前端部分现在改用angular,一切从头学起,今天记录一下关于数据请求的问题,由于get的请求方式比较简单,与post也类似,所以就单独讲讲post方式. 文档上post数据的写法有好几种, ...
- springmvc和js前端的数据传递和接收方式
在springmvc中controller的结果集可通过json格式传到js前端接受,也可以通过Map传给前端,具体实现如下 1,通过json格式传递 controller层实现如下 @Request ...
- angular js 页面修改数据存入数据库
一.编写service,修改数据要根据ID回显数据 //根据ID查询 public Brand findById(Long id); //修改 public int update(Brand bran ...
- angular js 页面添加数据保存数据库
一.编写实体类Controller层返回数据使用 package entity; import java.io.Serializable; public class Result implements ...
- Angular.js指令
ng-style <input type="button" value="set color" ng-click="myStyle={col ...
- angular.js 中的作用域 数据模型 控制器
1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...
- Angular JS 中 指令详解
Angular JS的强大功能就在于其可以自定义很多指令,现在就指令做一下详细的剖析. 一个Angular js 指令(directive)需要指定一个唯一的名字(myDirective)和一个函数, ...
随机推荐
- 平常写css网页制作时最实用的九条CSS技巧
一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<css基本语法>. 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的 ...
- 【POJ】【1061】/【BZOJ】【1477】青蛙的约会
扩展欧几里德 根据题意列出不定方程: (x+m*T)-(y+n*T)=k*L; //T表示跳了T次,由于是环,可能追了多圈,所以结果应为k*L 化简得 T(m-n)-kL=y-x; 这就成了我们熟悉 ...
- Java多线程——<二>将任务交给线程，线程声明及启动
一.任务和线程 <thinking in java>中专门有一小节中对线程和任务两个概念进行了具体的区分,这也恰好说明任务和线程是有区别的. 正如前文所提到的,任务只是一段代码,一段要达成 ...
- Codeforces Round #363 (Div. 2)->B. One Bomb
B. One Bomb time limit per test 1 second memory limit per test 256 megabytes input standard input ou ...
- OneAlert：国内首家 SaaS 模式的云告警平台
随着互联网行业的高速发展,企业 IT 应用环境日趋复杂.几分钟的故障就会严重到用户体验,那么如何有效降低IT故障带来的影响呢?权威数据表明,86%的企业认为建立有效的监控系统和告警系统.提升 IT 的 ...
- StringBuffer用法
public class StringBufferTest { public static void main(String[] args) { StringBuffer sb=new StringB ...
- IOS 视图控制对象生命周期-init、viewDidLoad、viewWillAppear、viewDidAppear、viewWillDisappear等的区别及用途
iOS视图控制对象生命周期-init.viewDidLoad.viewWillAppear.viewDidAppear.viewWillDisappear.viewDidDisappear的区别及用途 ...
- lintcode 中等题：subsets II 带重复元素的子集
题目 带重复元素的子集 给定一个可能具有重复数字的列表,返回其所有可能的子集 样例 如果 S = [1,2,2],一个可能的答案为: [ [2], [1], [1,2,2], [2,2], [1,2] ...
- unity3d泰斗破坏神2----课程列表
免费 课时1:泰斗破坏神第一支预告视频 01:32免费 课时2:泰斗破坏神第二支预告视频 01:58第 1 章 : 游戏开始 用户登录 服务器选择课时3:游戏开始 用户登录 服务器选择课时4:素材介绍 ...
- mysql23个知识点
1.它是一种解释语言:写一句执行一句,不需要整体编译执行. 2.1.没有“ ”,字符串使用‘ '包含 3.一个表只有一个主键,但是一个主键可以是由多个字段组成的 组合键 4.实体完整性:实体就是指一条 ...