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 相关文章推荐
css图片自适应大小
Nov 28 Javascript
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
JS实现评价的星星功能
Aug 20 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 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下几种删除目录的方法总结
2007/08/19 PHP
PHP 第二节 数据类型之数值型
2012/04/28 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
Python实现统计代码行的方法分析
2017/07/12 Python
python中Apriori算法实现讲解
2017/12/10 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
python getopt模块使用实例解析
2019/12/18 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
Allen Edmonds官方网站:一家美国优质男士鞋类及配饰制造商
2019/03/12 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
Java的类与C++的类有什么不同
2014/01/18 面试题
应届实习生的自我评价范文
2014/01/05 职场文书
大学活动总结格式
2014/04/29 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android