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. C#对.zip 存档读取和写入

    Framework4.5支持 引用: System.IO.Compression.dll,System.IO.Compression.FileSystem.dll 提取压缩文件 ZipFile.Ext ...

  2. .NET 实现并行的几种方式（二）

    本随笔续接:.NET 实现并行的几种方式(一) 四.Task 3)Task.NET 4.5 中的简易方式 在上篇随笔中,两个Demo使用的是 .NET 4.0 中的方式,代码写起来略显麻烦,这不 .N ...

  3. 使用图片视频展示插件blueimp Gallery改造网站的视频图片展示

    在很多情况下,我们网站可能会展示我们的产品图片.以及教程视频等内容,结合一个比较好的图片.视频展示插件,能够使得我们的站点更加方便使用,也更加酷炫,在Github上有很多相关的处理插件可以找来使用,有 ...

  4. redis 安装

    安装wget http://download.redis.io/releases/redis-3.2.3.tar.gztar -xzvf redis-3.2.3.tar.gzcd redis-3.2. ...

  5. 在Thinkphp中使用AJAX实现无刷新分页

    在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...

  6. AlloyRenderingEngine文本框组件

    写在前面 Github: https://github.com/AlloyTeam/AlloyGameEngine 在dom元素里,自带了input标签,设置其type为text,它就是一个文本框. ...

  7. Android InputType详解

    android:inputType 如果设置android:inputType = "number",则默认弹出的输入键盘为数字键盘,且输入的内容只能为数字. InputType文 ...

  8. Android 多个listview的实现

    正好,今天项目中需要,先写了个demo,给大家参考参考. 先上图,需要的自己,看看具体的代码实现步骤 大概说一下实现步骤: 1.布局中先用 scrollview 包裹 LinearLayout < ...

  9. 以前写的一段aop，远程接口调用的日志。

    using System;using System.Collections.Generic;using System.Linq;using System.Text; using Microsoft.P ...

  10. JS控制键盘录入 和 window.event.keycode对照

    一.只允许录入整数 1.不允许录入非数字(按下字母键就会提示并清空) function intOnly() { if (!(window.event.keyCode >= 48 &&am ...