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 相关文章推荐
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
超简单的微信小程序轮播图
Nov 22 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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的MySQL连接类
2013/06/07 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
详解jQuery选择器
2016/12/21 Javascript
拖动时防止选中
2017/02/03 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
Python实现Youku视频批量下载功能
2017/03/14 Python
python正则实现提取电话功能
2018/02/24 Python
python 下载文件的多种方法汇总
2020/11/17 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
蔻驰法国官网:COACH法国
2018/11/14 全球购物
现代绅士日常奢侈品:Todd Snyder
2019/12/13 全球购物
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
5s推行计划书
2014/05/06 职场文书
活动总结怎么写啊
2014/05/07 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
使用Ajax实现无刷新上传文件
2022/04/12 Javascript