Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象,有可用的方法和属性。

Scope 可应用在视图和控制器上。

当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递:

控制器中的属性对应了视图上的属性:

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

当在控制器中添加 $scope 对象时,视图 (HTML) 可以获取了这些属性。

视图中,你不需要添加 $scope 前缀, 只需要添加属性名即可,如: {{carname}}

Scope 概述

AngularJS 应用组成如下:

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

scope 是模型。

scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。

根作用域

所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。

创建控制器时,将 $rootScope 作为参数传递,可在应用中使用:

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

<h1>{{lastname}} 家族成员:</h1>

<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

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

  1. 38.angular的scope作用域

    转自:https://www.cnblogs.com/best/tag/Angular/ 1. Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. S ...

  2. angular.js之作用域scope'@','=','&'

    <!doctype html> <html ng-app='myApp'> <head> </head> <body> <script ...

  3. Angular.js回想+学习笔记(1)【ng-app和ng-model】

    Angular.js中index.html简单结构: <!doctype html> <html ng-app> <head> <script src=&qu ...

  4. Angular JS 学习之 Scope作用域

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

  5. angular js 指令的数据传递 及作用域数据绑定

    <div my-directive my-url="http://google.com" my-link-text="Click me to go to Googl ...

  6. angular.js 中的作用域 数据模型 控制器

    1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...

  7. Angular JS - 4 - Angular JS 作用域与控制器对象

    1. 控制器对象使用 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...

  8. angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe

    angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...

  9. AngularJS Scope(作用域)

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

随机推荐

  1. mysql 和 mongo db 语法对比

    本文描述了MySQL中的常用SQL语句在MongoDB中的写法,如果你长期使用MySQL而对MongoDB跃跃欲试,这篇简单的文章可以帮助你更快的进入角色.查询:MySQL:SELECT * FROM ...

  2. Redis:在windows环境安装Redis

    Redis:在windows环境安装Redis 第一步: 下载windows版本的Redis:https://github.com/MSOpenTech/Redis. 第二步: 在命令行执行:D:\r ...

  3. 三种工厂模式的分析以及C++实现

    三种工厂模式的分析以及C++实现 以下是我自己学习设计模式的思考总结. 简单工厂模式 简单工厂模式是工厂模式中最简单的一种,他可以用比较简单的方式隐藏创建对象的细节,一般只需要告诉工厂类所需要的类型, ...

  4. sharepoint 2013 自定义列表eventhandle权限控制

    记录一下如何在sharepoint server 2013自定义列表中,使用eventhandle控制自定义列表custom list的条目item权限. ///<summary> /// ...

  5. LAMP编译安装遇到的问题

    apache安装 1, no SSL-C headers found configure: error: ...No recognized SSL/TLS toolkit detected 解决办法: ...

  6. 用CATransform3D实现3D效果和制作简单3D动画

    我们先来看下CATransform3D的头文件 struct CATransform3D { CGFloat m11, m12, m13, m14; CGFloat m21, m22, m23, m2 ...

  7. 错误: 找不到或无法加载主类 tomcat-juli.jar

    错误: 找不到或无法加载主类 tomcat-juli.jar 然后就可以用了.

  8. C语言之变量与常量的介绍

    一 标示符 标识符:可以理解为是变量名.名字常量表示法的常量名,但是不仅限于这两个 命名规范: 1.起名要有意义,基本要做到一看名字就知道是用来干嘛的(要求你遵守,但不会报错,希望能够养成这样的好习惯 ...

  9. 【.NET-EF】Entity Framework学习笔记2 - 增删改(没查询)

    学习描述:用EF就像是省略了做实体类和DAL类,感觉是很方便,废话不多说,直接写步骤: 1.创建EF的edmx文件 这个其实在笔记1已说过,不过有些细节也要说,所以再说一遍,这里使用的是EF 6.1版 ...

  10. 快速理解Parquet的DL和RL

    关于Parquet的详细介绍,请参考: 新一代列式存储格式Parquet,此文中对Parquet做了详细的介绍,这里不做重复介绍,但其中关于Definition Level(DL)和Repeated ...