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 相关文章推荐
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
javascript操作表格排序实例分析
May 06 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
js实现移动端导航点击自动滑动效果
Jul 18 Javascript
帝国cms首页列表页实现点赞功能
Oct 30 Javascript
vue.js移动数组位置,同时更新视图的方法
Mar 08 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
微信小程序实现蓝牙打印
Sep 23 Javascript
Vue.Draggable实现交换位置
Apr 07 Vue.js
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 读取shell管道传输过来的内容
2010/03/01 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
类之Prototype.js学习
2007/06/13 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
前端性能优化建议
2020/09/17 Javascript
Python实现文件按照日期命名的方法
2015/07/09 Python
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
matplotlib绘制动画代码示例
2018/01/02 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
python字符串判断密码强弱
2020/03/18 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
ASP.NET Core中的配置详解
2021/02/05 Python
执行总经理岗位职责
2014/02/03 职场文书
班级口号大全
2014/06/09 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
杨善洲观后感
2015/06/04 职场文书
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers