`

理解Angularjs作用域$Scope

 
阅读更多
    AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法。但有一个例外:在directive中使用scope: { ... },这种方式创建的作用域是一个独立的"Isolate"作用域,它也有父作用域,但父作用域不在其原型链上,不会对父作用域进行原型继承。这种方式定义作用域通常用于构造可复用的directive组件。
   作用域的原型继承是非常简单普遍的,甚至你不必关心它的运作。直到你在子作用域中向父作用域的原始类型属性使用双向数据绑定2-way data binding,比如Form表单的ng-model为父作用域中的属性,且为原始类型,输入数据后,它不会如你期望的那样运行——AngularJS不会把输入数据写到你期望的父作用域属性中去,而是直接在子作用域创建同名属性并写入数据。这个行为符合JavaScript原型继承机制的行为。AngularJS新手通常没有认识到ng-repeat、 ng-switch、ng-view和ng-include 都会创建子作用域, 所以经常出问题。 (见 示例)
    如果我们在子作用域中访问一个父作用域中定义的属性,JavaScript首先在子作用域中寻找该属性,没找到再从原型链上的父作用域中寻找,如果还没找到会再往上一级原型链的父作用域寻找。在AngularJS中,作用域原型链的顶端是$rootScope,JavaScript寻找到$rootScope为止。

   AngularJS 作用域Scope的继承

提示:

以下方式会创建新的子作用域,并且进行原型继承: ng-repeat、ng-include、ng-switch、ng-view、ng-controller, 用scope: true和transclude: true创建directive。
以下方式会创建新的独立作用域,不会进行原型继承:用scope: { ... }创建directive。这样创建的作用域被称为"Isolate"作用域。
注意:默认情况下创建directive使用了scope: false,不会创建子作用域。

进行原型继承即意味着父作用域在子作用域的原型链上,这是JavaScript的特性。AngularJS的作用域还存在如下内部定义的关系:

scope.$parent指向scope的父作用域;
scope.$$childHead指向scope的第一个子作用域;
scope.$$childTail指向scope的最后一个子作用域;
scope.$$nextSibling指向scope的下一个相邻作用域;
scope.$$prevSibling指向scope的上一个相邻作用域;
这些关系用于AngularJS内部历遍,如$broadcast和$emit事件广播,$digest处理等。

*个人理解的Angularjs作用域
1.双向绑定通过$Scope作用域两种方法实现:一种是通过ng-modal绑定,另一种是通过{{ }}绑定.两种方法可以单独使用.在js文件中把想要绑定的参数通过$Scope.变量名的方式绑定到想要绑定的参数名上,然后在html文件中通过ng-modal=变量名或者{{变量名}}来实现双向绑定.
例子:
HTML中,
<div class="col-sm-12" id="simpleInfo">
                        <a href="{{picture}}" class="jqzoom" >
                            <img src="{{picture}}" style="border: 1px solid #666;height:400px;width:540px;" />
                        </a>
                    </div>

在js文件中,
  $scope.infoModal = function(record){
             //将当前记录添加到作用域上的checkRecord;
             $scope.checkRecord = record;
             $scope.picture = $scope.checkRecord.qjzp;
             console.log($scope.picture);
             $('#infoModal').modal();
         };
分享到:
评论

相关推荐

    深入探究AngularJs之$scope对象(作用域)

    AngularJs中的$scope对象是模板的域模型,也称为作用域实例.通过为其属性赋值,可以传递数据给模板渲染. 每个$scope都是Scope类的实例,Scope类有很多方法,用于控制作用域的生命周期、提供事件传播功能,以及支持模板的...

    深入解析AngularJS框架中$scope的作用与生命周期

    有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时也会立刻重新渲染视图.  有了 $scope 这样一个桥梁,应用的业务代码可以都在 controller 中...

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

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

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

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

    AngularJs学习第五篇从Controller控制器谈谈$scope作用域

    主要介绍了AngularJs(五)从Controller控制器谈谈$scope作用域 的相关资料,需要的朋友可以参考下

    AngularJS Scope(作用域)

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

    详解在AngularJS的controller外部直接获取$scope

    以前利用webqq的写过一个自动发消息的脚本,由于那时webqq还直接使用类似jQuery操作DOM的技术,所以脚本很...可以在jQuery中通过.scope()方法获取当前选择器内容里继承的域。 即类似这样的方式: $('div[ng-contro

    spring bean 的作用域(scope)

    spring bean 的作用域(scope), SPringle bean的作用域

    AngularJS 作用域详解及示例代码

    在控制器,模型数据通过$scope对象访问。 [removed] var mainApp = angular.module("mainApp", []); mainApp.controller("shapeController", function($scope) { $scope.message = "In shape controller"; $...

    AngularJS Controller作用域.docx

    AngularJS Controller作用域.docx

    深入理解变量作用域

    有关作用域的新描述给理解多环境下的变量提供了一种有用的方法,它为javascript的工作过程提供了一个强大的新理解。 每个javascript执行环境都有一个和它关联在一起的作用域链(scope chain).这个作用域链是一个对象...

    浅谈angularJS 作用域

    主要介绍了浅谈angularJS 作用域的相关资料,需要的朋友可以参考下

    详解angularjs 学习之 scope作用域

    Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。 Scope 是一个存储应用数据模型的对象,有可用的方法和属性。 Scope 可应用在视图和控制器上。 作用域是Web应用的控制器和视图之间的粘结剂...

    AngularJS 0005:作用域

    文章:http://blog.csdn.net/yysyangyangyangshan/article/details/53425956

    AnjularJS中$scope和$rootScope的区别小结

     $scope只针对当前的controller作用域生效 用下面的例子来证明上述的说法: 定义一个模块名为myApp var myApp = angular.module('myApp', []); 创建oneController和twoController这两个controller oneController...

    angularjs 源码解析之scope

    $scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也...有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时也会立刻重新渲染视图.

    AngularJS深入探讨scope,继承结构,事件系统和生命周期

    本文实例讲述了AngularJS的scope,继承结构,事件系统和生命周期。分享给大家供大家参考,具体如下: 深入探讨 Scope 作用域 每一个 $scope 都是类 Scope 的一个实例。类 Scope 拥有可以控制 scope 生命周期的方法,...

Global site tag (gtag.js) - Google Analytics