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 相关文章推荐
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
JS简单实现无缝滚动效果实例
Aug 24 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
vue中过滤器filter的讲解
Jan 21 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 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
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
基于Python中求和函数sum的用法详解
2018/06/28 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
基于Python爬取搜狐证券股票过程解析
2020/11/18 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
银行会计职员个人的自我评价
2013/09/29 职场文书
大学生自荐信
2013/12/11 职场文书
创先争优制度
2014/01/21 职场文书
联谊会主持词
2014/03/26 职场文书
工地安全生产标语
2014/06/06 职场文书
珍惜资源的建议书
2014/08/26 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书