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 相关文章推荐
window.opener用法和用途实例介绍
Aug 19 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
基于JS实现table导出Excel并保留样式
May 19 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
建立动态的WML站点(三)
2006/10/09 PHP
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
详解PHP神奇又有用的Trait
2019/03/25 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
在nodejs中创建child process的方法
2021/01/26 NodeJs
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
Python中logging模块的用法实例
2014/09/29 Python
Python 正则表达式(转义问题)
2014/12/15 Python
Python MD5加密实例详解
2017/08/02 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
Python常用库大全及简要说明
2020/01/17 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
sqlalchemy实现时间列自动更新教程
2020/09/02 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
英文自荐信
2013/12/15 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
美术毕业生求职信
2014/02/25 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python