1.　　AngularJS Scope(作用域)

  • Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
  • Scope 是一个对象，有可用的方法和属性。
  • Scope 可应用在视图和控制器上。

2.　　使用Scope：在 AngularJS 创建控制器时，你可以将 $Scope 对象当作一个参数传递

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="js/angular.min.js"></script>

        <style>

            input.ng-invalid{

                background-color: lightblue;

            }

        </style>

    </head>

    <body>

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

            <h1>{{carname}}</h1>

        </div>

        <script>

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

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

                $scope.carname = 'Volvo';

            })

        </script>

        <p>控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。</p>

    </body>

</html>

3.　　Scope概述：scope 是模型。scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

　　   AngularJS 应用组成如下：

  • View(视图), 即 HTML。
  • Model(模型), 当前视图中可用的数据。
  • Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

4.　　Scope作用范围：在大型项目中， HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。上面的例子中我们可以发现在创建控制器的时候第一个值是我们在某一个元素中 ng-controller 的属性值，如果没有匹配的元素，那么创建的控制器是没有任何作用的，而且还会出现异常。当匹配成功后，我们在js代码中设置的属性和方法就能在匹配的元素中使用，这时候$Scope的作用域就在这个匹配元素的 起始标签 和 结束标签 中。

5.　　根作用域：$rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="js/angular.min.js"></script>

        <style>

            input.ng-invalid{

                background-color: lightblue;

            }

        </style>

    </head>

    <body>

        <div ng-app="myApp">

            <div ng-controller="myCtrl1">

                <h1>{{carname}}</h1>

            </div>

            <p>{{name}}</p>

        </div>

        <script>

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

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

                $scope.carname = 'Volvo';

                $rootScope.name = 'wgl'

            })

        </script>

        <p>控制器中创建一个属性名 "carname"，只能在控制器中使用。</p>

        <p>控制器中创建一个跟作用域的属性名 "name"，可以在 ng-app 指令包含的所有 HTML 元素中使用。</p>

    </body>

</html>

AngularJS Scope(作用域)的更多相关文章

  1. AngularJS学习之旅—AngularJS Scope作用域(五)

    1.AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Sco ...

  2. AngularJS–Scope(作用域)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Scope Scope 是一个应用程序的模块的对象.它是表达式的执行上下文.它充斥在DO ...

  3. AngularJs之Scope作用域

    前言: 上篇博文AngularJs之directive中说了Scope作用域是个大坑,所以拿出来作为重点总结! 什么是scope AngularJS 中,作用域是一个指向应用模型的对象,它是表达式的执 ...

  4. 理解AngularJS的作用域Scope

    AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法.但有一个例外:在directive中使用scope: { ... },这种方式创建的作用域是一个独 ...

  5. 理解angularJS中作用域$scope

    angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...

  6. AngularJs(五）从Controller控制器谈谈$scope作用域

    大纲 用于简单示例和简单应用的controller 应用 多个controller应用的作用域问题 controller继承作用域问题 Controller的创建 AngularJs controll ...

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

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

  8. Angular JS 学习之 Scope作用域

    1.Scope作用域是应用在HTML(视图)和JavaScript(控制器)之间的纽带: Scope是一个对象,有可用的方法和属性: Scope可应用在视图和控制器上: 2.当你在AngularJS中 ...

  9. AngularJS $scope 继承性 作用 生命周期

    一.基本概念 作用域是一个指向应用模型的对象,相当于MVVM中的ViewModel,能绑定数据(属性)和行为(方法),能监控表达式和传递事件,是实现双向绑定的基础,是应用在 HTML (视图) 和 J ...

随机推荐

  1. react-native 简单的导航

    默默潜水了两年了,一直都在看大神们写的博客,现在我也分享一下跟RN导航有关的东西. 前两年我主要是做iOS开发的,现在刚找了份工作,应公司要求,现在开始学习reactnative的东西,由于我以前没怎 ...

  2. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(二)-Hexo参数设置

    前言 前文手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置介绍了github注册.git相关设置以及hexo基本操作. 本文主要介绍一下hexo的常用参数设置. ...

  3. EC笔记：第三部分：17、使用独立的语句将newed对象放入智能指针

    一般的智能指针都是通过一个普通指针来初始化,所以很容易写出以下的代码: #include <iostream> using namespace std; int func1(){ //返回 ...

  4. expect基本使用方法

    参考: http://www.cnblogs.com/lzrabbit/p/4298794.html expect是linux系统中可以和子进程进行交互的一个命令,使用它可以做一些自动化工作.pyth ...

  5. 智能指针unique_ptr的用法

    unique_ptr是独占型的智能指针,它不允许其他的智能指针共享其内部的指针,不允许通过赋值将一个unique_ptr赋值给另一个unique_ptr,如下面错误用法: std::unique_pt ...

  6. java.net.SocketException: Connection reset

    java.net.SocketException: Connection reset at java.net.SocketInputStream.read(SocketInputStream.java ...

  7. spider RPC性能测试报告

    测试环境部署结构 测试用例 类 别 说明 请求报文 194字节({"systemId":"PL","appVersion":"qq ...

  8. 摆脱DOM操作，从TodoMVC看angularJS

    取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...

  9. 非域客户端的office使用RMS加密服务出现‘介绍“信息权限管理服务”’服务的提示

    环境:office2007,需要使用windows RMS服务,客户机处于工作组模式,如图: 出现这个说明客户机没有发现RMS服务,可以通过导入注册表解决,如下: Windows Registry E ...

  10. 如何用代码读取Office Online Server2016的文档的备注信息

    前言 在一个项目上客户要求读取office online server 2016的对文档的备注信息,如下图: 以前思路老纠结在OOS这个在线上,总有以为这个信息存储在某个列表中,其实错了,这个备注信息 ...