详解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 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
H5实现仿flash效果的实现代码
Sep 29 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
简介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来自动调用不同服务器上的flash
2006/10/09 PHP
我用php+mysql写的留言本
2006/10/09 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
fix-ie5.js扩展在IE5下不能使用的几个方法
2007/08/20 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
jQuery插件Tmpl的简单使用方法
2015/04/27 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
python选择排序算法实例总结
2015/07/01 Python
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
Python+django实现文件上传
2016/01/17 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
Python iter()函数用法实例分析
2018/03/17 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
提升Python程序性能的7个习惯
2019/04/14 Python
python标准库os库的函数介绍
2020/02/12 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
大学班级文化建设方案
2014/05/06 职场文书
大学毕业生推荐信
2014/07/09 职场文书
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
python实现简单石头剪刀布游戏
2021/10/24 Python