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实现yield的方法
Nov 06 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
Javascript实现图片不间断滚动的代码
Jun 22 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
react中Suspense的使用详解
Sep 01 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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 COOKIE设置为浏览器进程
2009/06/21 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
重命名批处理python脚本
2013/04/05 Python
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
详解Django中的过滤器
2015/07/16 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
医护人员英文求职信范文
2013/11/26 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
会计实训报告范文
2014/11/04 职场文书
上课迟到检讨书
2015/05/06 职场文书
个人求职意向书
2015/05/11 职场文书
六一亲子活动感想
2015/08/07 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
我收到了德劲DE1107
2022/04/05 无线电