AngularJS Controller作用域


Posted in Javascript onJanuary 09, 2017

$scope代表视图与数据模型的中间桥梁:scope域中的对象都model和view都可以共享,并且数据是双向同步controller的作用域:主要负责controller标签包裹的元素的数据处理,如果子元素嵌套Controller,则相应的子元素的作用Controller以距离子元素最近的为准(这种最近作用的原则在Jmeter测试框架,avalon的ms-controller同样体现)

HTML正文:

<!-- 指定应用名及控制器 -->
<body ng-app="myApp">

<div ng-controller="myCtrl01">
<p>myCtrl01的作用域</p>
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

<hr/>
<p>myCtrl02的作用域</p>
<div ng-controller="myCtrl02">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
</div>

Javascript操作代码:

//定义应用的控制器,负责具体数据处理:
//定义angular应用的名称:myApp:一个html中只有一个应用,如果存在多个以第一个为准
var app = angular.module('myApp', []);
app.controller('myCtrl01', function($scope) {

 /* 后台向scope域中存放对象:页面存放的标签:
 * ng-init 初始化变量 
 * ng-model:初始化变量并进行数绑定
 */
 $scope.firstName= "John";
 $scope.lastName= "Doe";
});

app.controller('myCtrl02', function($scope) {
 $scope.firstName= "Hello";
 $scope.lastName= "Python";
});

效果:

AngularJS Controller作用域

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Hutia 的 JS 代码集
Oct 24 Javascript
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
Vue中对拿到的数据进行A-Z排序的实例
Sep 25 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 Javascript
使用Ajax实现进度条的绘制
Apr 07 Javascript
详解JavaScript树结构
Jan 09 #Javascript
angular分页指令操作
Jan 09 #Javascript
jquery.zclip轻量级复制失效问题
Jan 08 #Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 #Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 #Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 #Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 #Javascript
You might like
PHP CodeBase:将时间显示为&quot;刚刚&quot;&quot;n分钟/小时前&quot;的方法详解
2013/06/06 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
JavaScript获取并更改input标签name属性的方法
2015/07/02 Javascript
JavaScript实现简单Tip提示框效果
2016/04/20 Javascript
js css自定义分页效果
2017/02/24 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
js实现股票实时刷新数据案例
2017/05/14 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
JS基于for语句编写的九九乘法表示例
2018/01/04 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python中用于返回绝对值的abs()方法
2015/05/14 Python
python中requests库session对象的妙用详解
2017/10/30 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
大课间活动制度
2014/01/18 职场文书
函授自我鉴定范文
2014/02/06 职场文书
顶撞老师检讨书
2014/02/07 职场文书
教学评估实施方案
2014/03/16 职场文书
转让协议书范本
2014/04/15 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
世界地球日活动总结
2015/02/09 职场文书
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL