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. GridView详细介绍

    GridView控件的属性 表10.6 GridView控件的行为属性属性描述AllowPaging指示该控件是否支持分页.AllowSorting指示该控件是否支持排序.AutoGenerateCo ...

  2. js 轮播效果

    <!--图片轮播      Start-->                    <div class="pics-ul">               ...

  3. Atitit ftp原理与解决方案

    Atitit ftp原理与解决方案 Deodeo sh shmayama ..search ftp.. 1. http和ftp都只是通信协议,就是只管传输那一块的,那为什么不能使用ftp来显示网页?? ...

  4. STSDB、NDataBase 对象数据库在不同.net framework下无法读取的解决办法

    STSDB.NDataBase 等对象数据库将对象保存在文件中后,如果在不同的windows平台.不同的.net frameWork下总是无法读取,原因是对象模式已经不同了. 解决的办法也很简单,就是 ...

  5. iOS 10 开发适配系列 之 权限Crash问题

    升级 iOS 10 之后目测坑还是挺多的,记录一下吧,看看到时候会不会成为一个系列. 直入正题吧 今天用一个项目小小练下手,发现调用相机,崩了.试试看调用相册,又特么崩了.然后看到控制台输出了以下信息 ...

  6. jdbc数据库连接过程及驱动加载与设计模式详解

    首先要导入JDBC的jar包:接下来,代码:Class.forName(xxx.xx.xx)返回的是一个类 Class.forName(xxx.xx.xx)的作用是要求JVM查找并加载指定的类, 也就 ...

  7. SQL Server会话KILL不掉，一直处于KILLED /ROLLBACK状态情形浅析

    今天遇到一个很奇怪的情况,发现一个会话异常,这个会话只是在执行一个简单的存储过程,里面使用了链接服务器(Linked Server)查询另外一台服务器数据(存储过程里面没有任何显性事务.UPDATE. ...

  8. shell脚本批量收集linux服务器的硬件信息快速实现

    安装ansible批量管理系统.(没有的话,ssh远程命令循环也可以) 在常用的数据库里面新建一张表,用你要收集的信息作为列名,提供可以用shell插入.

  9. nginx整理

    一.为什么选择Nginx搭建Web服务器 Apache和Nginx是目前使用最火的两种Web服务器,Apache出现比Nginx早.Apache HTTP Server(简称Apache)是世界使用排 ...

  10. jquery基础

    show() hide() toggle()         fadeIn() fadeOut() fadeToggle() fadeTo()         slideUp() slideDown( ...