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. xmpp

    xmpp学习 下载: Openfire 服务器:Openfire 4.0.2 客户端:Spark 2.7.7 安装 Openfire安装: 根据提示一直下一步,服务器域名设置为:localhost(p ...

  2. @Autowired注解的使用

    使用Spring时,通过Spring注入的Bean一般都被定义成private,并且要有getter和setter方法,显得比较繁琐,增加了代码量,而且有时会搞忘造成错误. 可以使用@Autowire ...

  3. Linux安装MySQL

    步骤: 1 [qq@localhost Desktop]$ su root    //以root身份进入 Password:(默认为空) 2 [root@localhost Desktop]# yum ...

  4. spring源码：BeanPostProcessor（li）

    在spring管理Bean的初始化过程中,除了正常管理bean的实例化(初始化.参数注入等)外,还对外提供了丰富的对Bean操作的扩展.例如自定义初始化操作,自定义容器退出时Bean的销毁操作等等.这 ...

  5. Maven对插件进行全局设置

    并不是所有插件都适合从命令行配置,有些参数的值从项目创建到发布都不会改变,或者很少改变,对于这种情况,在POM文件中一次性配置就显然比重复在命令行中输入要方便了. 用户可以在生命插件的时候,对插件进行 ...

  6. 评《撸一段 SQL ? 还是撸一段代码？ 》

    最近看到一篇博客<撸一段 SQL ? 还是撸一段代码?>,文章举例说明了一个连表查询使用程序code来写可读性可维护性更好,但是回帖意见不一致,我想作者在理论层面没有做出更好的论述,而我今 ...

  7. MBTiles

    MBTiles Specification MBTiles is a specification for storing tiled map data in SQLite databases for ...

  8. Atitit ftp原理与解决方案

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

  9. 【代码笔记】iOS-获得富文本设置以后的文字高度

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  10. Tomcat中的Session小结

    什么是Session 对Tomcat而言,Session是一块在服务器开辟的内存空间,其存储结构为ConcurrentHashMap: Session的目的 Http协议是一种无状态协议,即每次服务端 ...