Angular的MVC和作用域


Posted in Javascript onDecember 26, 2016

首先看看Angular的控制器。

<!DOCTYPE HTML>
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>angular</title>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
</head>
<body>
<div ng-controller='Aaa'>
 <p>{{name}}</p>
</div>
<div ng-controller='Bbb'>
 
<p>{{name}}</p>
</div>
<script type="text/javascript">
 
function Aaa($scope){
 

$scope.name = 'hello AngularJs';
 
};
 
function Bbb($scope){
 

$scope.name = 'Hi';
 
};
</script>
</body>
</html>

在html元素上添加ng-app指令(初始化的指令,任何DOM元素都可以!),ng-app可以有属性值(ng-app="my-app")后续详解。

ng-controller就是模块下的控制器,$scope上的数据属于局部作用域,在视图上使用{{}}来渲染数据。

上面的例子简单了展示了一些数据,下面看看局部作用域全局作用域

<div ng-controller='Aaa'>
 <p>{{name}}</p>
 <p>{{age}}</p>
</div>
<div ng-controller='Bbb'>
 <p>{{name}}</p>
 <p>{{age}}</p>
</div>
<script type="text/javascript">
 function Aaa($scope,$rootScope){
 $scope.name = 'hello AngularJs';
 $scope.age = 10; 
 $rootScope.age = 20;
 };
 function Bbb($scope){
 $scope.name = 'Hi';
 $scope.age = 10;
 };
</script>

Angular的MVC和作用域

$scope定义局部作用域,$rootScope定义全局作用域。

age得到10和10,如果将Aaa里面的$scope.age = 10;注释掉,可得到20和10。

Angular的MVC和作用域

局部属性,会优先查找,如果在模块同时存在该属性,会优先查找局部。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
动态刷新 dorado树的js代码
Jun 12 Javascript
在JavaScript中获取请求的URL参数
Dec 22 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
实例讲解JavaScript 计时事件
Jul 04 Javascript
js实现电灯开关效果
Jan 19 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 #Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 #Javascript
Angular的$http与$location
Dec 26 #Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 #Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 #Javascript
Angular路由简单学习
Dec 26 #Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 #Javascript
You might like
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
php获取随机数组列表的方法
2014/11/13 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
JS event使用方法详解
2008/04/28 Javascript
深入理解JavaScript定时机制
2010/10/29 Javascript
JQuery live函数
2010/12/24 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
详解react-redux插件入门
2018/04/19 Javascript
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
servlet面试题
2012/08/20 面试题
分公司负责人任命书
2014/06/04 职场文书
市场营销策划方案
2014/06/11 职场文书
小学领导班子对照材料
2014/08/23 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
工伤事故赔偿协议书
2015/08/06 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL