Angular.js之作用域scope'@','=','&'实例详解


Posted in Javascript onFebruary 28, 2017

什么是scope

AngularJS 中,作用域是一个指向应用模型的对象,它是表达式的执行环境。作用域有层次结构,这个层次和相应的 DOM 几乎是一样的。作用域能监控表达式和传递事件。

在 HTML 代码中,一旦一个 ng-app 指令被定义,那么一个作用域就产生了,由 ng-app 所生成的作用域比较特殊,它是一个根作用域($rootScope),它是其他所有$Scope 的最顶层。

除了用 ng-app 指令可以产生一个作用域之外,其他的指令如 ng-controller,ng-repeat 等都会产生一个或者多个作用域。此外,还可以通过 AngularJS 提供的创建作用域的工厂方法来创建一个作用域。这些作用域都拥有自己的继承上下文,并且根作用域都为$rootScope。

在生成一个作用域之后,在编写 AngularJS 代码时,$scope 对象就代表了这个作用域的数据实体,我们可以在$scope 内定义各种数据类型,之后可以直接在 HTML 中以 {{变量名}} 方式来让 HTML 访问到这个变量。

下面通过实例代码给大家介绍angular.js之作用域scope'@','=','&'

<!doctype html> 
<html ng-app='myApp'> 
<head> 
</head> 
<body> 
<script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script>

<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>

<div ng-controller="listCtrl" ng-app="myApp"> 


<input type="text" ng-model="color"> 


<!-- <span kid hd-color="color"></span> --> <!--@是单项数据绑定,hd-color="{{color}}"作用域隔离,在view中是以模板“{{}}”的形式;=双向绑定,hd-color="color",在view中直接以属性的形式出现-->


<div kid color="callback()"></div>

</div>
<script type="text/javascript">


var myApp=angular.module('myApp',[]); 


myApp.controller('listCtrl',function($scope){ 



$scope.color="red"; 



$scope.callback=function(){




return 'a web developer !';



}


}); 


myApp.directive('kid',function(){ 



return { 




restrict:'AE', 




//template:'<div style="color:{{color}}">@符号的学习</div>' , 




template:'<h1>{{color()}}</h1>', 




scope:{ /*color:"=hdColor"*//* "@hdColor" */color:'&'} //通过&属性名来调用控制器的函数



} 


}); 
</script>
</div> 
</body>
</html>

以上所述是小编给大家介绍的Angular.js之作用域scope'@','=','&'实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一些不错的js函数ajax
Aug 20 Javascript
jquery获取input的value问题说明
Aug 19 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
简单的JS轮播图代码
Jul 18 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 #Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 #Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 #Javascript
AngularJS constant和value区别详解
Feb 28 #Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 #Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 #Javascript
Vue.js父与子组件之间传参示例
Feb 28 #Javascript
You might like
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
2017/07/05 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
python实现用于测试网站访问速率的方法
2015/05/26 Python
Python 操作MySQL详解及实例
2017/04/30 Python
Python实现线程状态监测简单示例
2018/03/28 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
Python绘制动态水球图过程详解
2020/06/03 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
医护人员英文求职信范文
2013/11/26 职场文书
给导游的表扬信
2014/01/10 职场文书
升国旗仪式主持词
2014/03/19 职场文书
素质教育标语
2014/06/27 职场文书
大学迎新生标语
2014/10/06 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
干部考察材料范文
2014/12/24 职场文书
退休欢送会主持词
2015/07/01 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS