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 四则运算精度修正函数代码
May 31 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 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
PHP安全性漫谈
2012/06/28 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
鼠标图片振动代码
2006/07/06 Javascript
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
koa大型web项目中使用路由装饰器的方法示例
2019/04/02 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
pandas 将list切分后存入DataFrame中的实例
2018/07/03 Python
pandas 选择某几列的方法
2018/07/03 Python
PyTorch实现AlexNet示例
2020/01/14 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
英国领先的电子、技术和办公用品购物网站:Ebuyer
2018/04/04 全球购物
乡镇食品安全责任书
2014/07/28 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
第二次离婚起诉书
2015/05/18 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android