详解AngularJS中的作用域


Posted in Javascript onJune 17, 2015

 范围扮演其视图连接控制器的角色一个特殊的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中的作用域

Javascript 相关文章推荐
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
Nov 22 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
Easyui 之 Treegrid 笔记
Apr 29 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
Vue2几种常见开局方式详解
Sep 09 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 #Javascript
简介AngularJS的视图功能应用
Jun 17 #Javascript
在AngularJS中使用AJAX的方法
Jun 17 #Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 #Javascript
AngularJS的表单使用详解
Jun 17 #Javascript
举例讲解AngularJS中的模块
Jun 17 #Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 #Javascript
You might like
php自定文件保存session的方法
2014/12/10 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
JQuery下关于$.Ready()的分析
2009/12/13 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
详解vue 图片上传功能
2019/04/30 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
Python标准异常和异常处理详解
2015/02/02 Python
python中的编码知识整理汇总
2016/01/26 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
python软件都是免费的吗
2020/06/18 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
世界汽车零件:World Car Parts
2019/09/04 全球购物
什么是.net
2015/08/03 面试题
暑期实习鉴定
2013/12/16 职场文书
中层干部竞争上岗演讲稿
2014/01/13 职场文书
建房协议书
2014/04/11 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
先进工作者推荐材料
2014/12/23 职场文书
新教师个人总结
2015/02/06 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
光荣之路观后感
2015/06/12 职场文书
承兑汇票延期证明
2015/06/23 职场文书
合作意向书怎么写
2019/06/24 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js