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判断浏览器是否是IE的比较好的办法
May 08 Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 Javascript
微信小程序实现天气预报功能(附源码)
Dec 10 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编解码(urlencode()rawurlencode()
2010/07/03 PHP
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
smarty模板中拼接字符串的方法
2014/02/14 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
JavaScript中的关联数组问题
2015/03/04 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
python自动化测试之setUp与tearDown实例
2014/09/28 Python
Python多线程编程(一):threading模块综述
2015/04/05 Python
Python调用命令行进度条的方法
2015/05/05 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
Python实现Linux中的du命令
2017/06/12 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
Numpy掩码式数组详解
2018/04/17 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
环保建议书100字
2014/05/14 职场文书
作风建设演讲稿
2014/05/23 职场文书
中职生求职信
2014/07/01 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python