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 事件冒泡简介及应用
Jan 11 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
Sep 22 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
JS数组搜索之折半搜索实现方法分析
Mar 27 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 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写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
php5.5中类级别的常量使用介绍
2013/10/02 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
浅谈基于Vue.js的移动组件库cube-ui
2017/12/20 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
python字符串中的单双引
2017/02/16 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
Python eval函数介绍及用法
2020/11/09 Python
一些高难度的SQL面试题
2016/11/29 面试题
毕业生个人求职信范文分享
2014/01/05 职场文书
公司请假条范文
2014/04/11 职场文书
家长学校工作方案
2014/05/07 职场文书
授权收款委托书
2014/09/23 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
python tkinter实现定时关机
2021/04/21 Python
MySql开发之自动同步表结构
2021/05/28 MySQL
python常见的占位符总结及用法
2021/07/02 Python