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 相关文章推荐
javascript预览上传图片发现的问题的解决方法
Nov 25 Javascript
JavaScript使用循环和分割来替换和删除元素实例
Oct 13 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
npx create-react-app xxx创建项目报错的解决办法
Feb 17 Javascript
iview实现图片上传功能
Jun 29 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
给ECShop添加最新评论
2015/01/07 PHP
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
JavaScript获得url查询参数的方法
2015/07/02 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
在python中的socket模块使用代理实例
2014/05/29 Python
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
C#的几个面试问题
2016/05/22 面试题
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
优秀团员个人的自我评价
2013/10/02 职场文书
信息管理专业推荐信
2013/10/29 职场文书
会计实习自我鉴定
2013/12/04 职场文书
运动会跳远加油稿
2014/02/20 职场文书
硕士生找工作求职信
2014/07/05 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
教师节班会开场白
2015/06/01 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle