`
hudeyong926
  • 浏览: 2016583 次
  • 来自: 武汉
社区版块
存档分类
最新评论

AngularJs Scope

 
阅读更多

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 Ang-include对应的是Scope B

  1. ng-include创建的Scope Bng-controller创建的Scope A的子scope,所以在template.html里可以访问Scope A的model和function。
  2. 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 属性记录父-子关系。

 
 
  • 大小: 7.9 KB
分享到:
评论

相关推荐

    AngularJS Scope(作用域)

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

    AngularJs Scope详解及示例代码

    本文主要介绍AngularJs Scope的知识,这里整理了详细资料及示例代码,有兴趣的小伙伴可以参考下

    AngularJS中scope的绑定策略实例分析

    主要介绍了AngularJS中scope的绑定策略,结合实例形式简单分析了AngularJS scope的三种绑定模式的使用方法与相关注意事项,需要的朋友可以参考下

    AngularJS入门教程之Scope(作用域)

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

    AngularJS全局scope与Isolate scope通信用法示例

    主要介绍了AngularJS全局scope与Isolate scope通信用法,结合格式分析了全局scope和directive本地scope相关功能、通信用法与相关注意事项,需要的朋友可以参考下

    AngularJS-Scope.SafeApply:AngularJS $ scope。$ apply()没有麻烦和错误

    AngularJS-Scope.SafeApply AngularJS $ scope。$ apply()没有麻烦和错误:) 关于 AngularJS的核心功能是范围,变量和绑定的使用。 在代码级别更新值并回显DOM或应用程序的过程围绕着对范围运行摘要来查看发生了...

    AngularJS - Novice to Ninja.pdf.pdf )

    Chapter 3 AngularJS Scope & Events . . . . . . . . . . . . 45 Scope Demystified . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Writing Access with ...

    AngularJS中的$watch(),$digest()和$apply()区分

    AngularJS $scope里面的$watch(),$digest()和$apply()是AngularJS的核心函数,学习AngularJS必须理解这几个函数。 在绑定$scope中的变量到view的时候,AngularJS自动在内部创建一个”Watch”。”Watch”用于监听...

    深入理解Angular.JS中的Scope继承

    AngularJS中scope之间的继承关系使用JavaScript的原型继承方式实现。本文结合AngularJS Scope的实现以及相关资料谈谈原型继承机制。下面来看看详细的介绍: 基本原理 在JavaScript中,每创建一个构造函数...

    深入理解AngularJs-scope的脏检查(一)

    主要介绍了深入理解AngularJs-scope的脏检查(一) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    最新AngularJS开发宝典视频教程 后盾网AngularJS培训视频教程 后盾网.txt

    ├最新AngularJS开发宝典—第005讲 $scope的基本使用方法.mp4 ├最新AngularJS开发宝典—第006讲 表达式与ng-bind及ng-cloak解决闪屏问题.mp4 ├最新AngularJS开发宝典—第007讲 ng-model在表单中双向绑定实例分析...

    浅谈AngularJs指令之scope属性详解

    下面小编就为大家带来一篇浅谈AngularJs指令之scope属性详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    关于angularJs指令的Scope(作用域)介绍

    每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供...

    AngularJS中isolate scope的用法分析

    本文实例讲述了AngularJS中isolate scope的用法。分享给大家供大家参考,具体如下: angular js中指令directive有个特别有用的东西,那就是 isolate scope (被隔离的scope) 关于具体他和全局的scope 有什么区别,...

    AngularJS-Scope.onReady:AngularJS的辅助包装器,用于使控制器和指令与HTTP数据保持同步

    AngularJS-Scope.onReady 这是一个帮助文件,用于为angularJS应用程序中的$ scope.onReady和$ scope。$ whenReady命令提供支持。关于访问视图时,AngularJS将同时执行模板HTML和控制器。 这意味着,如果必须在控制器...

Global site tag (gtag.js) - Google Analytics