Angular JS 学习之 Scope作用域
1.Scope作用域是应用在HTML(视图)和JavaScript(控制器)之间的纽带;
Scope是一个对象,有可用的方法和属性;
Scope可应用在视图和控制器上;
2.当你在AngularJS中创建控制器时,你可以将$scope对象作为一个参数传递;
<div ng-app="" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.carname="Volvo"; //控制器中创建一个属性名 "carname",对应了视图中使用 {{ }} 中的名称。
});
</script>
3.Scope概述:
**AngularJS应用组成如下:
(1)View(视图),即HTML;
(2)Model(模型),当前视图中可用的数据;
(3)Controller(控制器),即JavaScript函数,可以添加或修改属性;
**scope是模型,是一个javaScript对象,带有属性和方法,这些属性和方法可以在视图中和控制器中使用;
4.Scope作用范围:
<div ng-app="" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in name">{{x}}</li>
</ul>
</div>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.name=['Emil','Tobias','Linus'];
});
</script>
5.根作用域:所有的应用都有一个$rootScope,它可以作用在ng-app指令包含的所有HTML元素中;
$rootScope可作用于整个应用中,是各个controller中scope的桥梁,用rootscope定义的值,可以在各个controller中使用;
<div ng-app="' ng-controller="myCtrl">
<h1>{{lastname}}家族成员:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$rootScope){
$scope.names=["Emil","Tobias","Linus"];
$rootscope.lastname="Refsnes";
});
</script>
Angular JS 学习之 Scope作用域的更多相关文章
- python , angular js 学习记录【1】
1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...
- 适合我胃口的angular.js学习资料
断断续续弄了半年的ANGULAR.JS学习资料,网上下载了N多资料,测试了很多次. 现在只能算是入门,因时间问题,现在要转入其它领域. 如果以后要拾起来,下面这个PDF比较对我胃口. <Angu ...
- angular.js学习笔记--概念总结
好久没更新了,现在开始学习学习angularjs,并且把学习到的一些知识总结记录一下,方便以后查找以及希望能给初学者一些帮助!(由于本人也是初学ng所以各位慎重理解!) 废话不多说,开始! $root ...
- Angular JS 学习之路由
1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...
- Angular JS 学习之Bootstrap
1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...
- Angular.JS学习笔记——1
内容来自:http://www.runoob.com/angularjs/angularjs-intro.html AngularJS 是一个 JavaScript 框架.它是一个以 JavaScri ...
- Angular JS 学习之简介
1.Angular JS是一个JavaScript框架,它是一个以JavaScript编写的库,它可以通过<script>标签添加到HTML页面: <script src=" ...
- Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...
- Angular.js 学习笔记
AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. <!-- ng-app 指令定义一个 AngularJS 应用程序. ng-mod ...
随机推荐
- 留只脚印(DP)
题目链接:http://codeforces.com/problemset/problem/698/A 很久很久没做咯~~~~ dp 是个很神奇的东西.... #include <iostrea ...
- js正则表达式替换空格
str.replace(/^\s+|\s+$/g, '') 解析: str:要替换的字符串 \s : 表示 space ,空格+: 一个或多个^: 开始,^\s,以空格开始$: 结束,\s$,以空 ...
- LeetCode 453 Minimum Moves to Equal Array Elements
Problem: Given a non-empty integer array of size n, find the minimum number of moves required to mak ...
- Debian下查看系统版本信息命令汇总
Debian下如何查看版本信息, 包括位数.版本信息以及CPU内核信息.CPU具体型号等等,整个CPU信息一目了然. 1.odoo@debian64:~$ uname -a(Debian查看版本当前操 ...
- xmpp-笔记3
一.了解XMPP 协议(标准) XMPP 即时通讯协议 SGIP 短信网关协议 这手机发短信 移动支付和网页支付 0x23232[0,1] 0x23232 0x23232 0x23232 只有协议,必 ...
- web前端开发:css3实现loading
web前端开发:css3实现loading 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE ...
- ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(四) 之 用户搜索(Elasticsearch),加好友流程(1)。
前面几篇基本已经实现了大部分即时通讯功能:聊天,群聊,发送文件,图片,消息.不过这些业务都是比较粗犷的.下面我们就把业务细化,之前用的是死数据,那我们就从加好友开始吧.加好友,首先你得知道你要加谁.L ...
- JavaScript基础——创建函数
JavaScript的最重要的一个部分是制作其他代码可以重用的代码.要做到这一点,你可以把代码组织成执行特定任务的函数.函数是结合在一个单一的块中,并给予一个名称的一系列代码语句.然后,你就可以通过引 ...
- HTTP1.0和HTTP1.1的主要区别是
HTTP/.0协议使用非持久连接,即在非持久连接下,一个tcp连接只传输一个Web对象 HTTP/.1默认使用持久连接(然而,HTTP/.1协议的客户机和服务器可以配置成使用非持久连接)在持久连接下, ...
- (2)Underscore.js常用方法
目录 1.集合相关方法 1.1.数组的处理 map(循环,有返回值),将返回的值依次存入一个新的数组 each(循环,无返回值 ...