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实现Windows任务管理器的代码
Mar 27 Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
判断ie的两种简单方法
Aug 12 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
AngularJS快速入门
Apr 02 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
解决Vue watch里调用方法的坑
Nov 07 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
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
DOM相关内容速查手册
2007/02/07 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
学习十八届三中全会精神实施方案
2014/02/17 职场文书
企业年度评优方案
2014/06/02 职场文书
社会工作专业求职信
2014/07/15 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
道歉信怎么写
2015/05/12 职场文书
小学生家长意见
2015/06/03 职场文书
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL