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 相关文章推荐
用js实现多域名不同文件的调用方法
Jan 12 Javascript
JS脚本defer的作用示例介绍
Jan 02 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
实例介绍JavaScript中多种组合继承
Jan 20 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
详解React的回调渲染模式
Sep 10 Javascript
vue render函数动态加载img的src路径操作
Oct 26 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
本地计算机无法启动Apache故障处理
2014/08/08 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
JQuery for与each性能比较分析
2013/05/14 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
nodejs更改项目端口号的方法
2018/05/13 NodeJs
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
Python中字符串对齐方法介绍
2015/05/21 Python
Python素数检测实例分析
2015/06/15 Python
python中format()函数的简单使用教程
2018/03/14 Python
python实现淘宝购物系统
2019/10/25 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
网络编辑职责
2014/03/01 职场文书
新闻传媒系求职信范文
2014/04/19 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
出国留学导师推荐信
2015/03/26 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
Win11查看设备管理器
2022/04/19 数码科技