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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 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 HtmlReplace输入过滤安全函数
2010/07/03 PHP
PHP实现文件下载详解
2014/11/27 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
EasyUI创建人员树的实例代码
2017/09/15 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
英文自荐信
2013/12/19 职场文书
机械设计毕业生自荐信
2014/02/02 职场文书
西门豹教学反思
2014/02/04 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
社会工作专业求职信
2014/07/15 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
爱国电影观后感
2015/06/19 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS