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 相关文章推荐
我见过最全的个人js加解密功能页面
Dec 12 Javascript
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 Javascript
JavaScript canvas实现文字时钟
Jan 10 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 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
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
Python常用小技巧总结
2015/06/01 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
椰子猫砂:CatSpot
2018/08/27 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
为什么需要版本控制
2016/10/28 面试题
高三生物教学反思
2014/01/25 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
感动中国何玥观后感
2015/06/02 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python
python获取对象信息的实例详解
2021/07/07 Python
vue使用echarts实现折线图
2022/03/21 Vue.js