详解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对象在后台转化java对象的问题探讨
Dec 20 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
JavaScript满天星导航栏实现方法
Mar 08 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
vue 实现特定条件下绑定事件
Nov 09 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 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 数组和字符串互相转换实现方法
2013/03/26 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
php生成短域名函数
2015/03/23 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
PHP7内核之Reference详解
2019/03/14 PHP
PHP实现百度人脸识别
2019/05/06 PHP
js相册效果代码(点击创建即可)
2013/04/16 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
浏览器缩放检测的js代码
2014/09/28 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
在GitHub Pages上使用Pelican搭建博客的教程
2015/04/25 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
解决Django中多条件查询的问题
2019/07/18 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
歌颂祖国的演讲稿
2014/05/04 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
2015年化验员工作总结
2015/04/10 职场文书