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 相关文章推荐
jQuery中extend函数的实现原理详解
Feb 03 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
解决vue项目router切换太慢问题
Jul 19 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获取当前url路径的函数以及服务器变量
2013/06/29 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
JavaScript 乱码问题
2009/08/06 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
ES6中Array.includes()函数的用法
2017/09/20 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python进程间通信Queue实例解析
2018/01/25 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
Django框架表单操作实例分析
2019/11/04 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
jupyter notebook实现显示行号
2020/04/13 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
一套软件开发工程师笔试题
2015/05/18 面试题
高中毕业生自我鉴定
2013/11/03 职场文书
给校长的建议书500字
2014/05/15 职场文书
2014最新离职证明范本
2014/09/12 职场文书
期末复习计划
2015/01/19 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
一文简单了解MySQL前缀索引
2022/04/03 MySQL
Python字符串常规操作小结
2022/04/03 Python