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. iFace安全专家揭秘：存放在区块链钱包中的比特币，其实已经早就不属于你……

    自MoreToken钱包跑路之后,2019年3月以来陆续多个钱包.交易所跑路,造成了大量用户账户被盗,仅MoreToken钱包用户损失总价值就达12.2亿人民币,用户损失惨重.为什么这么多钱包.交易所 ...

  2. 基于ipv6的数据抓包

    一.实验拓扑 二.配置过程 以r1为例 R1: R1(config)#int f0/0 R1(config-if)#ipv6 enable R1(config-if)#ipv6 address 200 ...

  3. 【Spark篇】---Spark初始

    一.前述 Spark是基于内存的计算框架,性能要优于Mapreduce,可以实现hadoop生态圈中的多个组件,是一个非常优秀的大数据框架,是Apache的顶级项目.One stack  rule  ...

  4. 『Kruscal重构树 Exkruscal』

    新增一道例题及讲解 Exkruscal \(Exkruscal\)又称\(Kruscal\)重构树,是一种利用经典算法\(Kruscal\)来实现的构造算法,可以将一张无向图重构为一棵具有\(2n-1 ...

  5. mysql锁机制详解

    前言 大概几个月之前项目中用到事务,需要保证数据的强一致性,期间也用到了mysql的锁,但当时对mysql的锁机制只是管中窥豹,所以本文打算总结一下mysql的锁机制. 本文主要论述关于mysql锁机 ...

  6. C#线程安全使用（四）

    这是时隔多年第四篇,主要是因为身在东软受内网限制,好多文章就只好发到东软内部网站,懒的发到外面,现在一点点把在东软写的文章给转移出来. 这里主要讲解下CancellationTokenSource,C ...

  7. 深度学习入门实战（一）：像Prisma一样算法生成梵高风格画像

    本文由云+社区发表 作者:董超 导语:现在人工智能是个大热点,而人工智能离不开机器学习,机器学习中深度学习又是比较热门的方向,本系列文章就从实战出发,介绍下如何使用MXnet进行深度学习~ 既然是实战 ...

  8. ELK 经典用法—企业自定义日志收集切割和mysql模块

    本文收录在Linux运维企业架构实战系列 一.收集切割公司自定义的日志 很多公司的日志并不是和服务默认的日志格式一致,因此,就需要我们来进行切割了. 1.需切割的日志示例 2018-02-24 11: ...

  9. 基本 SQL 之增删改查（二）

    上一篇文章中,我们介绍了 SQL 中最基本的 DML 语法,包括 insert 的插入数据.update 的更新数据.delete 的删除数据以及基本的查询语法,但大多比较简单不能解决我们日常项目中复 ...

  10. Swing——简单的计算器

    前言 这是博主学习完Swing后,使用Swing实现的一个简单计算器.做简单的计算器的目的是将最近所学的Swing给应用起来,写博文介绍的目的是记录做这个计算器的思路.下面将分为界面和事件两部分介绍. ...