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 Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 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文件下载类
2006/12/06 PHP
PHP 中的批处理的实现
2007/06/14 PHP
PHP无敌近乎加密方式!
2010/07/17 PHP
javascript中简单的进制转换代码实例
2013/10/26 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
深入理解MVC中的时间js格式化
2016/05/19 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
python中实现k-means聚类算法详解
2017/11/11 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
python从子线程中获得返回值的方法
2019/01/30 Python
python可视化实现KNN算法
2019/10/16 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
应届生.NET方向面试题
2015/05/23 面试题
如何清空Session
2015/02/23 面试题
自荐信怎么写好
2013/11/11 职场文书
高中生期末评语大全
2014/01/28 职场文书
党员承诺书格式
2014/05/21 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
2014年财政所工作总结
2014/11/22 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
2016年母亲节广告语
2016/01/28 职场文书