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的函数重名看其初始化方式
Mar 08 Javascript
JavaScript 在线压缩和格式化收藏
Jan 16 Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
对node.js中render和send的用法详解
May 14 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
vue mvvm数据响应实现
Nov 11 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
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
JavaScript null和undefined区别分析
2009/10/14 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
详解javascript函数的参数
2015/11/10 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
python 切片和range()用法说明
2013/03/24 Python
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
python从入门到精通(DAY 1)
2015/12/20 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
DataReader和DataSet的异同
2014/12/31 面试题
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
食品安全工作实施方案
2014/03/26 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
七一建党日演讲稿
2014/09/05 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
升职感谢信
2015/01/22 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫