1、AngularJS Scope(作用域)
　　Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
　　Scope 是一个对象，有可用的方法和属性。
　　Scope 可应用在视图和控制器上。
2、如何使用 Scope
　　当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:
　　eg：

app.controller('myCtrl', function($scope) {

$scope.carname = "Volvo";

});

　　当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
　　视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

3、Scope 概述
　　AngularJS 应用组成如下：
　　View(视图), 即 HTML。
　　Model(模型), 当前视图中可用的数据。
　　Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
　　scope 是模型。
　　scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
4、Scope 作用范围
　　HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。
5、根作用域
　　所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
　　$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <script src="js/angular.min.js"></script>

</head>

<body>

    <div ng-app="myApp" ng-controller="myCtrl">

        <!-- Scope 概述 -->

        <input ng-model="name">

        <h1>{{greeting}}</h1>

        <button ng-click='sayHello()'>点我</button>

        <p>当你修改输入框中的值时，会影响到模型(model),当然也会影响到控制器对应的属性值。</p>

        <!-- Scope 作用范围 -->

        <ul>

            <li ng-repeat="x in names">{{x}}</li>

        </ul>

        <!-- 根作用域 -->

        <ul>

            <li ng-repeat="x in names">{{x}}-{{lastname}}</li>

        </ul>

        <p>注意 $rootScope 在循环对象内外都可以访问。</p>

    </div>

</body>

</html>

<script>

    var app = angular.module('myApp', []);

    app.controller('myCtrl', function ($scope,$rootScope) {

        //Scope 概述

        $scope.name = "Runoob";

        $scope.sayHello = function() {

            $scope.greeting = 'Hello ' + $scope.name + '!';

        };

        //Scope 作用范围

        $scope.names = ["Emil", "Tobias", "Linus"];

        //根作用域

        $rootScope.lastname = "Refsnes";

    });

</script>

AngularJS学习之旅—AngularJS Scope作用域(五)的更多相关文章

  1. AngularJS学习之旅—AngularJS 模块(十五)

    一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...

  2. 关于AngularJS学习整理---浅谈$scope(作用域) 新手必备！

    作为初次接触 AngularJS的新手,想要深层理解里面的内容短时间还是不可能的,所以标题写了浅谈字样,以下内容是参考各位大神以及相关书籍整理加个人理解,出现错误的地方请大家指正. $scope(作用 ...

  3. AngularJS学习之旅—AngularJS 控制器(六)

    1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...

  4. AngularJS学习之旅—AngularJS 指令(三)

    1.AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令.2.Angu ...

  5. AngularJS学习之旅—AngularJS 表达式(二)

    1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙 ...

  6. AngularJS学习之旅—AngularJS 表单(十六)

    一.AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button ...

  7. AngularJS学习之旅—AngularJS 事件(十四)

    1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...

  8. AngularJS学习之旅—AngularJS HTML DOM(十三)

    1.AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据 ...

  9. AngularJS学习之旅—AngularJS Table(十一)

    1.AngularJS 表格 1. ng-repeat 指令可以完美的显示表格 AngularJS 实例 <!DOCTYPE html> <html> <head> ...

随机推荐

  1. 使用jQuery获取元素的宽度或高度的几种情况

    今天说说使用jQuery获取元素大小的遇到几种情况 使用jQuery获取元素的宽度或高度的有几种情况: 1.使用width(),它只能获取当前元素的内容的宽度: 2.使用innerWidth(),它只 ...

  2. kubernetes---kubectl 管理集群资源

    由于我现在的集群是把虚拟机的master文件直接拷贝过来的,所以之前的node节点是不存在的,只有k8s-ubuntu-1是新加入的,所以我要把上面之前创建的资源删除 删除deployment--&g ...

  3. mysql+postgresql备份与恢复

    mysql备份一个库, mysqldump  -u用户名 -p密码 [选项] [数据库名] > /备份路径/备份文件名 mysqldump -uuser -p123123 auth > / ...

  4. Entity Framework Core 2.0 入门

    该文章比较基础, 不多说废话了, 直接切入正题. 该文分以下几点: 创建Model和数据库 使用Model与数据库交互 查询和保存关联数据 EF Core支持情况 EF Core的数据库Provide ...

  5. JVM虚拟机（1）---常用JVM配置参数

    常用JVM配置参数 常用JVM配置参数主要有:Trace跟踪参数.堆的分配参数.栈的分配参数. 一.Trace跟踪参数 跟踪参数用于跟踪监控JVM,对于开发人员来讲用于JVM调优以及故障排查的. 1. ...

  6. InstallShield Limited Edition使用说明

    从Visual Studio 2012开始,微软就把自家原来的安装与部署工具彻底废掉了,转而让大家去安装使用第三方的打包工具“InstallShield Limited Edition for Vis ...

  7. C#版[击败100.00%的提交] - Leetcode 6. Z字形变换 - 题解

    版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C#版 - L ...

  8. nginx~linux下的部署

    一些概念     Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.Nginx是由Igor Sysoev为俄 ...

  9. Go基础系列：map类型

    Go里的map用于存放key/value对,在其它地方常称为hash.dictionary.关联数组,这几种称呼都是对同一种数据结构的不同称呼,它们都用于将key经过hash函数处理,然后映射到val ...

  10. ThreadLocal使用和原理简析

    1. 解决共享资源冲突 对于并发工作,需要某种方式来防止两个任务同时访问相同的资源,至少在关键阶段不能出现这种冲突情况. 方法之一就是当资源被一个任务使用时,在其上加锁.第一个访问某项资源的任务必须锁 ...