Angular的MVC和作用域
更新时间：2016年12月26日 15:51:40 作者：小谢53
本文主要Angular的MVC和作用域进行详细分析介绍，具有一定的参考价值，下面跟着小编一起来看下吧
首先看看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>
$scope定义局部作用域，$rootScope定义全局作用域。
age得到10和10，如果将Aaa里面的$scope.age = 10;注释掉，可得到20和10。
局部属性，会优先查找，如果在模块同时存在该属性，会优先查找局部。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
AngularJS中的$watch()，$digest()和$apply()区分
这篇文章主要介绍了AngularJS中的$watch()，$digest()和$apply()区分，感兴趣的朋友可以参考一下2016-04-04
Angular Component属性绑定target和attr.target的区别分析
这篇文章主要介绍了Angular Component属性绑定target和attr.target的区别分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
任何时候，如果我们想要为请求添加全局功能，例如身份认证、错误处理等，在请求发送给服务器之前或服务器返回时对其进行拦截，是比较好的实现手段2015-12-12
AnglarJS作为一款优秀的Web框架，可大大简化前端开发的负担。本文给大家介绍AngularJS进行性能调优的7个建议，涉及到angularjs性能调优相关知识，对本文感兴趣的朋友一起学习吧2015-12-12
这篇文章主要介绍了Angular5中调用第三方库及jQuery的添加的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
大家可以知道在Angularjs中可以用$http同服务器进行通信，功能上比较简单，AngularJS还提供了另外一个可选的服务$resource,使用它可以非常方便的同支持restful的服务单进行数据交互。这篇文章主要给大家深入的介绍了Angularjs中的$resource服务。2016-12-12
本篇文章主要介绍了angularJS模态框$modal实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
本文主要介绍AngularJS 动画,这里对动画的资料详细介绍并附有效果图和代码实例,有需要的小伙伴参考下2016-07-07
在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化，才能显示给用户。在angularjs中为我们提供了叫filter的指令，让我们能够很轻易就能做到着一些列的功能，angularjs内部为我们提供了number等很多内置的filter。2015-05-05
本篇文章主要介绍了AngularJS1.X学习笔记2-数据绑定详解，具有一定的参考价值，有兴趣的可以了解一下。2017-04-04
最新评论