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 相关文章推荐
JavaScript中的对象化编程
Jan 16 Javascript
jquery构造器的实现代码小结
May 16 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
js实现动态显示时间效果
Mar 06 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 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将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
javascript中对对层的控制
2006/12/29 Javascript
JavaScript 事件的一些重要说明
2009/10/25 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
JQuery教学之性能优化
2014/05/14 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
python设置检查点简单实现代码
2014/07/01 Python
python基于http下载视频或音频
2018/06/20 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
Python 复平面绘图实例
2019/11/21 Python
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
JAVA招聘远程笔试题
2015/07/23 面试题
毕业生自我鉴定
2013/12/04 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
美国留学经济担保书
2014/05/20 职场文书
市场营销计划书
2015/01/17 职场文书
离婚案件答辩状
2015/05/22 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技