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 相关文章推荐
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
fastadmin中调用js的方法
May 14 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
js面试题之异步问题的深入理解
Sep 20 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单件模式结合命令链模式使用说明
2008/09/07 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
php使用session二维数组实例
2014/11/06 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
document.documentElement和document.body区别介绍
2013/09/16 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
2017/06/01 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
Vue组件基础用法详解
2020/02/05 Javascript
python操作xml文件示例
2014/04/07 Python
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
Python字符串处理函数简明总结
2015/04/13 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
python实现车牌识别的示例代码
2019/08/05 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
东方红海科技面试题软件测试方面
2012/02/08 面试题
公司联欢晚会主持词
2014/03/22 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
校园活动策划方案
2014/06/13 职场文书
辛亥革命观后感
2015/06/02 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
Python借助with语句实现代码段只执行有限次
2022/03/23 Python