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 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
JS面向对象、prototype、call()、apply()
May 14 Javascript
Prototype Date对象 学习
Jul 12 Javascript
js替代copy(示例代码)
Nov 27 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
js实现无缝循环滚动
Jun 23 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
JavaScript Canvas实现验证码
Aug 02 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实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
PHP+AjaxForm异步带进度条上传文件实例代码
2017/08/14 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
统计出现最多的字符次数的js代码
2010/12/03 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
jquery如何判断某元素是否具备指定的样式
2013/11/05 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
Python松散正则表达式用法分析
2016/04/29 Python
Python 多核并行计算的示例代码
2017/11/07 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
python队列原理及实现方法示例
2019/11/27 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
简单租房协议书
2014/04/09 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
人民调解协议书范本
2014/10/11 职场文书
学雷锋日活动总结
2015/02/06 职场文书
我爱我班主题班会
2015/08/13 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang