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. springboot 实战之一站式开发体验

    都说springboot是新形势的主流框架工具,然而我的工作中并没有真正用到springboot: 都说springboot里面并没有什么新技术,不过是组合了现有的组件而已,但是自己却说不出来: 都说 ...

  2. MySQL 规范及优化

    一.建库建表优化 1.核心规范(推荐) 表字符集选择UTF8 (“表情”字段单独设置为其他字符集) 存储引擎使用INNODB 不在库中存储图片.文件等 使用可变长字符串(varchar) 每张表数据量 ...

  3. Docker 搭建pxc集群 + haproxy + keepalived 高可用（一）

    一.首先需要安装好docker,安装方法可以参考之前一篇博文Centos7安装docker [root@localhost ~]# systemctl start docker [root@local ...

  4. VSphere虚拟化ESXi的安装及基本管理

    虚拟化和云计算技术正在快速的发展,新的概念.观点.产品不断涌现.服务器虚拟化技术受到了人们的高度重视,普遍相信虚拟化将成为数据中心的重要组成部分.vSphere是VMware公司推出的一套服务器虚拟化 ...

  5. React 中 Link 和 NavLink 组件 activeClassName、activeStyle 属性不生效的问题

    首先 导航链接应该使用  NavLink 而不再是  Link NavLink 使用方法见 https://github.com/ReactTraining/react-router/blob/mas ...

  6. java程序员的NodeJS初识篇

    摘要 作为一个一直用java来写后端的程序员用NodeJS来写后台,实在不是很爽.这里记下这两个月的NodeJS学习所遇之坑,与java转NodeJS的同仁共勉.学习时间不长,若有理解错误,望指正. ...

  7. springcloud之服务注册与发现

    本次分享的是关于springcloud服务注册与发现的内容,将通过分别搭建服务中心,服务注册,服务发现来说明:现在北京这边很多创业公司都开始往springcloud靠了,可能是由于文档和组件比较丰富的 ...

  8. Visual Studio 2017中使用SourceLink调试ASP.NET Core源码

    背景 当我们在学习ASP.NET Core或者调试ASP.NET Core程序的时候,有时候需要调试底层代码,但是当我们在Visual Studio中调试程序的时候,由于一些基础库或者第三方库缺少pd ...

  9. asp.net core系列 27 EF模型配置(索引,备用键,继承)

    一.索引 索引是许多数据存储中的常见概念.虽然它们在数据存储中的实现可能会有所不同,但它们可用于更有效地基于列(或列集)进行查找.按照约定,用作外键每个属性 (或组的属性) 会自动创建索引.无法使用数 ...

  10. Android创建或删除了文件，在电脑端查看的时候，却没有对应的变化，处理办法

    在Android应用中,碰到一个问题,在代码中执行创建或者删除某个文件后,在系统的文件管理器中能够相应地看到文件的变化,但是插在电脑上查看的时候,却看不到改文件的变化.同时,当创建文件后,在系统中的某 ...