AngularJS 作用域详解及示例代码


Posted in Javascript onAugust 17, 2016

范围扮演其视图连接控制器的角色一个特殊的JavaScript对象。范围包含了模型数据。在控制器,模型数据通过$scope对象访问。

<script>
   var mainApp = angular.module("mainApp", []);

   mainApp.controller("shapeController", function($scope) {
     $scope.message = "In shape controller";
     $scope.type = "Shape";
   });
</script>

以下是在上面的例子中需要考虑的重要问题。

$scope被作为第一个参数在其构造器确定指标到控制器。

$scope.message 和 $scope.type 是它们在HTML页面中所用的模型。

我们已经设置模型的值将反映应用程序模块的控制器shapeController中。

我们可以在$scope定义函数功能。

继承范围

范围是特定的控制器。如果我们定义嵌套的控制器,然后控制器子将继承其父控制的范围。

<script>
   var mainApp = angular.module("mainApp", []);

   mainApp.controller("shapeController", function($scope) {
     $scope.message = "In shape controller";
     $scope.type = "Shape";
   });
	 
   mainApp.controller("circleController", function($scope) {
     $scope.message = "In circle controller";  
   });
</script>

以下是在上面的例子中需要考虑的重要问题。

我们在shapeController设定模型的值。

我们覆盖的子控制器circleController消息。当“消息”内的控制器circleController的模块使用时,将用于重写的消息。

例子

下面的例子将展示上述所有指令。

testAngularJS.html

<html>
<head>
  <title>Angular JS Forms</title>
</head>
<body>
  <h2>AngularJS Sample Application</h2>
  <div ng-app="mainApp" ng-controller="shapeController">
   <p>{{message}} <br/> {{type}} </p>
   <div ng-controller="circleController">
     <p>{{message}} <br/> {{type}} </p>
   </div>
   <div ng-controller="squareController">
     <p>{{message}} <br/> {{type}} </p>
   </div>
  </div>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
  <script>
   var mainApp = angular.module("mainApp", []);

   mainApp.controller("shapeController", function($scope) {
     $scope.message = "In shape controller";
     $scope.type = "Shape";
   });

   mainApp.controller("circleController", function($scope) {
     $scope.message = "In circle controller";  
   });

   mainApp.controller("squareController", function($scope) {
     $scope.message = "In square controller";
     $scope.type = "Square";
   });

  </script>
</body>
</html>

结果

在Web浏览器打开textAngularJS.html。看到结果如下。

AngularJS 作用域详解及示例代码

以上就是对AngularJS 作用域的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
Javascript实现的分页函数
Feb 07 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
图片翻转效果具体实现代码
Jan 09 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
jQuery Validate表单验证入门学习
Dec 18 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 #Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 #Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 #Javascript
Node.js中使用jQuery的做法
Aug 17 #Javascript
学习Angular中作用域需要注意的坑
Aug 17 #Javascript
js enter键激发事件实例代码
Aug 17 #Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 #Javascript
You might like
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
PHP 微信支付类 demo
2015/11/30 PHP
PHP登录验证码的实现与使用方法
2016/07/07 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python读取注册表中值的方法
2013/04/08 Python
Python日志模块logging简介
2015/04/13 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
简述Python2与Python3的不同点
2018/01/21 Python
python实现汽车管理系统
2018/11/30 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
小区文明倡议书
2014/05/16 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏