理解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)