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. linux中一些简便的命令之sort

    1.sort file 直接按照顺序排列 2.sort -r file 按照反序排列 3.sort -t [符号]file 指定符号的分隔符,默认为空格 sort -t ';' file 4.sort ...

  2. 准备PPT过程中的一些文档记录

    http://jm.taobao.org/2016/12/23/20161223/ https://www.csdn.net/article/2015-02-10/2823900 https://da ...

  3. Xamarin.Android多窗口传值【1】

    这种非常常见的场景我觉得大家都遇到过,那么我么可以通过Activity进行编码传值. using System.Text; using System; using Android.App; using ...

  4. 【朝花夕拾】Android性能篇之（一）序言及JVM

    序言        笔者从事Anroid开发有些年头了,深知掌握Anroid性能优化方面的知识的必要性,这是一个程序员必须修炼的内功.在面试中,它是面试官的挚爱,在工作中,它是代码质量的拦路虎,其重要 ...

  5. JavaScript 中 正则替换 replace

    本文初步介绍 replace 在 js 中,我们常常会遇到 用来 解决开发中常会遇到的 问题的 知识总结, 如果你已经 非常熟悉,又可以绕道了. 定义和用法 replace() 方法用于在字符串中常用 ...

  6. SQL修改表字段，加附属属性

    GO Go EXEC sys.[sp_addextendedproperty] @name = 'MS_Description',@value = '是否填写表单',@level0type = 'SC ...

  7. Thread之九：stop

    搞过Java线程的人都知道,stop这个方法是臭名昭著了,早就被弃用了,但是现在任然有很多钟情与他的人,永远都放不下他,因为从他的字面意思上我们可以知道他貌似可以停止一个线程,这个需求是每个搞线程开发 ...

  8. Nginx的负载均衡

    什么是负载均衡 负载均衡主要通过专门的硬件设备或者通过软件算法实现.通过硬件设备实现的负载均衡效果好.效率高.性能稳定,但是成本比较高.通过软件实现的负载均衡主要依赖于均衡算法的选择和程序的健壮性.均 ...

  9. spring-boot-2.0.3启动源码篇四 - run方法(三)之createApplicationContext

    前言 此系列是针对springboot的启动,旨在于和大家一起来看看springboot启动的过程中到底做了一些什么事.如果大家对springboot的源码有所研究,可以挑些自己感兴趣或者对自己有帮助 ...

  10. 第50章 设备授权端点(Device Authorization Endpoint) - Identity Server 4 中文文档(v1.0.0)

    设备授权端点可用于请求设备和用户代码.此端点用于启动设备流授权过程. 注意 终端会话端点的URL可通过发现端点获得. client_id 客户标识符(必填) client_secret 客户端密钥可以 ...