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和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
JavaScript 大数据相加的问题
Aug 03 Javascript
javascript瀑布流式图片懒加载实例
Jun 28 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
js+css实现全屏侧边栏
Jun 16 Javascript
vue中的计算属性和侦听属性
Nov 06 Javascript
js 实现Material UI点击涟漪效果示例
Sep 23 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
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
php中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
React Native 截屏组件的示例代码
2017/12/06 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
Python中Class类用法实例分析
2015/11/12 Python
浅谈python3发送post请求参数为空的情况
2018/12/28 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
全国文明单位申报材料
2014/05/31 职场文书
政风行风评议整改方案
2014/09/15 职场文书
单位工作证明书格式
2014/10/04 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
优秀员工推荐材料
2014/12/20 职场文书
孝女彩金观后感
2015/06/10 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs
python实现双向链表原理
2022/05/25 Python