详解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一组验证函数
Dec 20 Javascript
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
Jun 08 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
layui-select动态选中值的例子
Sep 23 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
使用数据库保存session的方法
2006/10/09 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
PHP操作数组相关函数
2011/02/03 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
php实现生成验证码实例分享
2016/04/10 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
给ListBox添加双击事件示例代码
2013/12/02 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
化妆品店促销方案
2014/02/24 职场文书
电台实习生求职信
2014/02/25 职场文书
向领导表决心的话
2014/03/11 职场文书
师德师风培训感言
2015/08/03 职场文书
暑假打工感想
2015/08/07 职场文书
军事理论课感想
2015/08/11 职场文书
班级班风口号大全
2015/12/25 职场文书
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python
Linux中sftp常用命令整理
2022/06/28 Servers