Scope是AngularJS里的一个很重要的概念,简单的说它就是用来保存AngularJS Model们的对象,是Model们温暖的小家
那这个小家是什么时候造的呢?
<html ng-app="mainApp"> </html>
我们知道,ng-app
是一个应用启动AngularJS的入口点,在这里也会创建一个root scope,在controller里可以通过$rootScope
调到,每个应用只能有一个root scope,但它会有多个child scope,那啥时候会创建child scope呢?
<html ng-app="mainApp"> <body ng-controller="MainCtrl"> <div ng-controller="SubCtrl" ng-include src=" 'template.html' "> </div> <ul> <li ng-repeat="item in items">{{item.name}}</li> </ul> </body> </html>
在上面的例子里,ng-controller
ng-include
ng-repeat
都创建了新的child scope(ng-repeat
是对每一个重复的元素都创建了新的child scope),他们之间的父子关系是这样的:
包含关系即是他们的父子关系,子scope是可以访问父scope上绑定的所有model和function的。
AngularJS会给scope对应的dom添加叫ng-scope的class,如果我们给自己的应用加这样一个css
.ng-scope {border: 2px dotted red;}
通过红色的虚线边框我们也可以看出来大概scope的范围,但注意,并不是所有的ng-scope都是新的scope,有些ng-scope类名对应的dom共享的是同一个scope。
细心的童鞋可能注意到,ng-controller="SubCtrl"
和ng-include
放在同一个div上了,为啥ng-controller="SubCtrl"
就是爸爸,ng-include
就是儿子呢?
这个没啥特别的原因,ng-controller
在AngularJS底层代码里实现的比较靠前而已,与在div上标明的顺序无关,但是这时会发生一个问题:
假如在ng-include
对应的template.html
里有这样的代码:
<input type="text" ng-model="lastName" >
我们会发现,在ng-controller="SubCtrl"
这个controller里是取不到lastName
的值的。
原因是这样的~
我们假设ng-controller="SubCtrl"
对应的是Scope A,ng-include
对应的是Scope B
-
ng-include
创建的Scope B是ng-controller
创建的Scope A的子scope,所以在template.html
里可以访问Scope A的model和function。 - 在
template.html
里用ng-model
绑定的model,是存放在Scope B上的,Scope A是拿不到的,即使model同名。
解决方案:
- 直接对Scope A的model绑定成员对象,如
ng-model="user.lastName"
- 或在
template.html
使用ng-model
绑定model时,加上$parent
(取父scope),如:ng-model="$parent.lastName"
,这样info就绑定在Scope A上了
比较推荐第一种方式,因为第一种抽象出了对象,比起第二种所有的model都直接绑在$scope上来,封装的更好
angularJS中的路由配置中的scope
var routeTable = function($routeProvider) { $routeProvider.when('/sellList', { templateUrl: 'views/sell/list.html', controller: 'sellListCtrl', resolve: sellResolve })
里面的controller的作用域scope对应tempateUrl页面上的全局,页面上任意地方写的angularjs都能起作用,注意页面里面不需要用ng-app='sellListCtrl'
一共有四种 Scope:
普通进行原型继承的 Scope —— ng-include, ng-switch, ng-controller, directive with scope: true
普通原型继承的 Scope 但拷贝赋值 —— ng-repeat。 每个 ng-repeat 的循环都创建新的子 Scope,并且子 Scope 总是获得新的属性。
独立的 isolate scope —— directive with scope: {...}。它不是原型继承,但 ‘=’, ‘@’ 和 ‘&’ 提供了访问父 Scope 属性的机制。
transcluded scope —— directive with transclude: true。它也遵循原型继承,但它同时是任何 isolate scope 的兄弟。
对于所有的 Scope,Angular 总是会通过 Scope 的 $parent, $$childHead 和 $$childTail 属性记录父-子关系。
相关推荐
在AngularJS中,当你创建一个控制器时,通常会将 `$scope` 对象作为参数传递。例如: ```javascript var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.carname = ...
在AngularJS中,Scope是应用程序中数据绑定的核心组件,它作为控制器、指令以及视图之间的数据桥梁。然而,当涉及到多指令共享同一个Scope时,可能会出现一些复杂的问题。本文将深入探讨AngularJS中多指令Scope问题...
3. 第三章“AngularJS Scope & Events”,深入探讨了作用域(Scope)的概念以及事件处理,作用域是连接模型和视图的桥梁,事件则是AngularJS中实现交互的重要机制。 4. 第四章“Multiple Views and Routing”讲述了...
AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。 Scope 是一个对象,有可用的方法和属性。 Scope 可应用在视图和控制器上。 如何使用 Scope 当你在 AngularJS...
在AngularJS中,作用域(scope)是应用中的核心概念之一,它是一个JavaScript对象,用来保存模型(Model)的属性。作用域为视图和控制器之间提供了连接,也可以用于组件和指令之间的数据通信。 AngularJS中有两种...
$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时...
AngularJS-Scope.SafeApply AngularJS $ scope。$ apply()没有麻烦和错误:) 关于 AngularJS的核心功能是范围,变量和绑定的使用。 在代码级别更新值并回显DOM或应用程序的过程围绕着对范围运行摘要来查看发生了...
Chapter 3 AngularJS Scope & Events . . . . . . . . . . . . 45 Scope Demystified . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Writing Access with ...
AngularJS $scope里面的$watch(),$digest()和$apply()是AngularJS的核心函数,学习AngularJS必须理解这几个函数。 在绑定$scope中的变量到view的时候,AngularJS自动在内部创建一个”Watch”。”Watch”用于监听...
在示例中,通过jQuery改变DOM元素内容,但这个改变并不会自动反映到AngularJS的scope上,从而导致视图和模型不同步。要解决这个问题,需要在修改模型后手动调用`scope.$apply()`函数,以确保AngularJS能够检测到模型...
本文将深入探讨AngularJs指令中的scope属性,这是一个非常重要的特性,因为它决定了指令如何与数据模型进行交互。 首先,AngularJs中的指令是通过调用模块的.directive()方法创建的。该方法的主体框架接受两个参数...
在AngularJS中,子scope可以继承父scope的属性,而隔离作用域用于组件或指令中创建独立的数据环境,防止与其他scope产生冲突。 此外,scope还支持事件机制,包括`$on`、`$broadcast`和`$emit`: - `$on`:注册事件...
AngularJS中scope之间的继承关系使用JavaScript的原型继承方式实现。本文结合AngularJS Scope的实现以及相关资料谈谈原型继承机制。下面来看看详细的介绍: 基本原理 在JavaScript中,每创建一个构造函数...
接着,《AngularJS_深度剖析与最佳实践》可能会更深入地探讨AngularJS的高级话题,如模块化、路由、指令的高级用法、以及$scope的工作原理。模块化有助于组织大型应用,而路由则允许在单页应用(SPA)中实现页面导航...
这个过程涉及到AngularJS的核心概念之一——Scope,它是应用程序中的数据模型,也是连接视图和控制器的桥梁。本文将深入探讨`ng-repeat`与Scope的继承关系。 首先,理解Scope的基本概念是关键。在AngularJS中,每个...
在AngularJS中,数据绑定是其核心特性之一,而作用域(scope)是实现数据绑定的关键。作用域在AngularJS中是数据模型和视图之间的一个桥梁,数据变化能够实时反映到视图中,同时视图的更改也能够实时反映到数据模型...
这可能包括深入讲解Scope、Controller、Directives和Filters的内部工作机制,以及如何利用AngularJS的模块系统构建大型应用。可能还会讨论AngularJS与其它技术如RESTful API、Bootstrap或jQuery的集成,以及如何使用...