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 相关文章推荐
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
javascript的push使用指南
Dec 05 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
canvas 实现中国象棋
Feb 17 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 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/03/07 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
详解AngularJS的通信机制
2015/06/18 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
实现python版本的按任意键继续/退出
2016/09/26 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
通过Python实现一个简单的html页面
2020/05/16 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
艺术用品:Arteza
2018/11/25 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
如何高效率的查找一个月以内的数据
2012/04/15 面试题
介绍一下linux文件系统分配策略
2013/02/25 面试题
建龙钢铁面试总结
2014/04/15 面试题
《雪儿》教学反思
2014/04/17 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android