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 面向对象编程(1) 基础
May 18 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
VsCode插件整理(小结)
Sep 14 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
vue中activated的用法
Jan 03 Vue.js
详解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
PHP4实际应用经验篇(1)
2006/10/09 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
在Django的上下文中设置变量的方法
2015/07/20 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
windows系统下Python环境搭建教程
2017/03/28 Python
python实现微信自动回复功能
2018/04/11 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
Python中print函数简单使用总结
2019/08/05 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
泰国网上购物:Shopee泰国
2018/09/14 全球购物
Internet主要有哪些网络群组成
2015/12/24 面试题
工作会议欢迎词
2014/01/16 职场文书
主管竞聘书范文
2014/03/31 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
小学生思想品德评语
2014/12/31 职场文书
关于迟到的检讨书
2015/05/06 职场文书
河童之夏观后感
2015/06/11 职场文书
大学学生会竞选稿
2015/11/19 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书