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 相关文章推荐
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
JS将unicode码转中文方法
May 08 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
详解vue中axios的封装
Jul 18 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
php7下的filesize函数
2019/09/30 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
Thinkphp页面跳转设置跳转等待时间的操作
2019/10/16 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
python 生成图形验证码的方法示例
2018/11/11 Python
python3实现猜数字游戏
2020/12/07 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
python 通过exifread读取照片信息
2020/12/24 Python
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
单位法定代表人授权委托书
2014/09/20 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
监守自盗观后感
2015/06/10 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers