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 相关文章推荐
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
Vue实现选择城市功能
May 27 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
Vue 递归多级菜单的实例代码
May 05 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中的fopen()函数用打开文件模式说明
2013/06/20 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
PHP.vs.JAVA
2016/04/29 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
javascript dom追加内容实现示例
2013/09/21 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
我就是这样学习Python中的列表
2019/06/02 Python
如何基于python测量代码运行时间
2019/12/25 Python
python重要函数eval多种用法解析
2020/01/14 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
中医药大学毕业生自荐信
2013/11/08 职场文书
基督教婚礼主持词
2014/03/14 职场文书
学生安全责任书范本
2014/07/24 职场文书
助学感谢信范文
2015/01/21 职场文书
党员干部廉政承诺书
2015/04/28 职场文书
高中政治教师教学反思
2016/02/23 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python