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 相关文章推荐
个人总结的一些关于String、Function、Array的属性和用法
Jan 10 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
js字符串转成JSON
Nov 07 Javascript
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
JSON字符串操作移除空串更改key/value的介绍
Jan 05 Javascript
详解微信小程序回到顶部的两种方式
May 09 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
PHP 图片文件上传实现代码
2010/12/29 PHP
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
php正则修正符用法实例详解
2016/12/29 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
简介Python中用于处理字符串的center()方法
2015/05/18 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
python中reload重载实例用法
2020/12/15 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
公司出差管理制度范本
2015/08/05 职场文书
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL