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 相关文章推荐
Javascript代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
小程序新版订阅消息模板消息
Dec 31 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
sql注入与转义的php函数代码
2013/06/17 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
JS原型链怎么理解
2016/06/27 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
canvas线条的属性详解
2018/03/27 HTML / CSS
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
校庆接待方案
2014/03/18 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书