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作用域的更多相关文章

  1. python , angular js 学习记录【1】

    1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

  2. 适合我胃口的angular.js学习资料

    断断续续弄了半年的ANGULAR.JS学习资料,网上下载了N多资料,测试了很多次. 现在只能算是入门,因时间问题,现在要转入其它领域. 如果以后要拾起来,下面这个PDF比较对我胃口. <Angu ...

  3. angular.js学习笔记--概念总结

    好久没更新了,现在开始学习学习angularjs,并且把学习到的一些知识总结记录一下,方便以后查找以及希望能给初学者一些帮助!(由于本人也是初学ng所以各位慎重理解!) 废话不多说,开始! $root ...

  4. Angular JS 学习之路由

    1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...

  5. Angular JS 学习之Bootstrap

    1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...

  6. Angular.JS学习笔记——1

    内容来自:http://www.runoob.com/angularjs/angularjs-intro.html AngularJS 是一个 JavaScript 框架.它是一个以 JavaScri ...

  7. Angular JS 学习之简介

    1.Angular JS是一个JavaScript框架,它是一个以JavaScript编写的库,它可以通过<script>标签添加到HTML页面: <script src=" ...

  8. Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)

    刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...

  9. Angular.js 学习笔记

    AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. <!-- ng-app 指令定义一个 AngularJS 应用程序. ng-mod ...

随机推荐

  1. KV6.60 SP1

    组态王6.60 SP1全新发布! 组态王6.60 SP1对过去几年6系列中已解决过的故障进行了合并,包括各主线分支.各OEM版本中的故障总计122个,覆盖运行系统.开发系统.历史趋势曲线控件.报表.A ...

  2. java classpath批量设置shell脚本

    java classpath批量设置shell脚本   注意:linux bash jar文件之间的分隔符是':'    export JAR_HOME=path to directory which ...

  3. XMPP框架下微信项目总结(3)获取点子名片信息(个人资料)更新电子名片

    思路:1 调用方法,添加点子名片模块(名片信息含电话,头像,单位个人信息)等 开启ps:APP发送请求到服务器openfire,服务器返回个人信息,app存储到数据库,app界面需要数据通过数据库获取 ...

  4. Android接口传递Json数组的处理方式

    public static XTResult<Void> addTravel(String uuid, String travelName, String travelId, String ...

  5. hdu1141(二进制数位,二分,打表)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1141 题意:××公司是制造computer的,1960年它造的computer是4bit的,之后每10 ...

  6. 1.1-java创建包和类的方法

    1.new-package-命名方法com打头.中间名称.后台要创建的class 2.创建class-    new-class 选择一下主方法 代码示例  编译完保存一下就能输出信息,一直没有保存才 ...

  7. SQL Server数据库大型应用解决方案总结(转载)

    转载地址:http://hb.qq.com/a/20120111/000216.htm 随着互联网应用的广泛普及,海量数据的存储和访问成为了系统设计的瓶颈问题.对于一个大型的互联网应用,每天百万级甚至 ...

  8. MSSQL数据的批量插入

    一.概述: 对于数据的批量插入操作似乎成了某些大数据量操作的必用手段,MSSQL也提供了一些数据批量插入的操作方法,先将这些方法汇总,以便于下次用到使用.面对数据的批量插入操作,我们也应该考虑一个问题 ...

  9. 【翻译四】java-并发之线程暂停

    Pausing Execution with Sleep Thread.sleep causes the current thread to suspend execution for a speci ...

  10. SQL中的多表查询,以及JOIN的顺序重要么?

    说法是,一般来说,JOIN的顺序不重要,除非你要自己定制driving table. 示例: SELECT a.account_id, c.fed_id, e.fname, e.lname -> ...