AngularJS scope 学习

levius 发布于2019-08-20 12:24 / 2293人阅读

摘要：访问对象中从父类继承的对象时都会去访问原型链。因为此处中混合用了，也会产生自己的，因此有和。在和两种情况下会分别产生，是两个不同的，号不同。

本文主要是学习别人的文章和回答之后的总结，此处给出链接深入学习AngularJS Scope

JavaScript原型继承简介
AngularJs中是双向数据绑定，但并不是每次修改都会产生相应的效果，有些时候传基础类型的值就有可能存在这种情况。JavaScript本身应该也会存在这种情况的，先挖个坑，待我好好学学JavaScript之后再来填。

上图是JavaScript的原型继承图，子类会继承父类的属性，读子类从父类继承的属性的值时会去访问原型链，也就是一层一层向上直到找到父类中的属性。但是如果直接给子类中基础类型的属性赋值的话不会访问原型链，也就是会在子类中建一个同名的新属性，再次访问时父类中的属性就不会被访问到了。访问对象中从父类继承的对象时都会去访问原型链。

childScope.aString === "parent string" //true 访问了原型链
childScope.aNumber === 100 //true 访问了原型链

childScope.aNumber = 20 //不访问原型链，子类中将增加一个新属性，值为20
childScope.aString = "child string" //不访问原型链，子类中将增加一个新的属性，值为 child string
childScope.anArray[2] = 100 //访问了原型链，父类中的anArray对象中第三个值被修改

AngularJS中ng-repeat、ng-switch和ng-include测试

    
    
    
        
        
        
        
        
        
    
    
        
            
                Input {{$index+1}}
                
                parent scope"s child scope
            
            
                {{list1}}            
            
            

            
                input{{$index+1}}
                
                parent scope"s child scope
            
            
                {{list2}}
            
            

            
                parent scope
            
            

            
                switch"s parent scope, parent scope"s child scope
                
                switch"s parent scope, parent scope"s child scope, different with false case
                
                
                parent scope, not switch scope
            
            

            
                switch"s parent scope, parent scope"s child scope
                
                switch"s parent scope, parent scope"s child scope, different with false case

    var TestScopeModule = angular.module("TestScopeModule", []);
    
    TestScopeModule.controller("TestScopeCtrl",["$scope",function ($scope) {
        $scope.list1 = ["value1","value2", "value3"];
        $scope.list2 = [{text : "value1"},{text : "value2"},{text : "value3"}];
        $scope.showScope = function (e) {
            console.log(angular.element(e.srcElement).scope());
        };
        $scope.loginData = false;
        $scope.parent = {};
        $scope.parent.loginData = false;
        $scope.login = function () {
            $scope.loginData = true;
        };
        $scope.logout = function () {
            $scope.loginData = false;
        };
        $scope.login1 = function () {
            $scope.parent.loginData = true;
        };
        $scope.logout1 = function () {
            $scope.parent.loginData = false;
        };    
    }])

以上是一小段测试代码，分别测试了ng-repeat、ng-switch和ng-include，代码中标出了测试结果，也就是子scope和父scope的范围。

parent scope中的属性和值

第一个ng-repeat中第一个child scope，scope中有自己的item属性和值，此处由于是基本的数据类型，改变值时不会访问原型链，因此和parent scope中的值不一样。ng-repeat会产生多个child scope，并且每个child scope中都会有自己的item属性。

第二个ng-repeat中第一个child scope,scope中有自己的item属性和值，此处item是对象，因此改变item对象中的value时会先去访问原型链，因此和parent scope中的值一样

ngswitch 产生的child scope，可以看到$parent中是parent scope。因为此处ngswitch中混合用了nginclude，nginclude也会产生自己的scope，因此有childHead和childTail。ngswitch在true和false两种情况下会分别产生scope，是两个不同的scope，id号不同。

这是ngswitch中nginclude产生的child scope，可以看到$parent的$id是12，也就是ngswitch产生的scope的id。

云服务器 GPU云服务器 Scopes Scoping scoped scope

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80965.html

Angularjs学习笔记指令

摘要：自定义指令中有很多内置指令，一般都是以开头的比如等等。本文介绍的自定义指令的用法。该参数的意思是替换指令的内容，更改上面的例子。将属性绑定到父控制器的域中学习概念多指令中的参数中增加了的值和的点击函数。自定义指令 angularjs中有很多内置指令，一般都是以ng开头的；比如：ng-app,ng-click,ng-repeat等等。本文介绍angularjs的自定义指令的用法。指令...

LeexMuller 2019-08-19 18:04 评论0 收藏0
Angularjs学习笔记指令

摘要：自定义指令中有很多内置指令，一般都是以开头的比如等等。本文介绍的自定义指令的用法。该参数的意思是替换指令的内容，更改上面的例子。将属性绑定到父控制器的域中学习概念多指令中的参数中增加了的值和的点击函数。自定义指令 angularjs中有很多内置指令，一般都是以ng开头的；比如：ng-app,ng-click,ng-repeat等等。本文介绍angularjs的自定义指令的用法。指令...

Cristic 2019-08-01 15:11 评论0 收藏0
AngularJS学习笔记(2) --- 指令参数和scope绑定策略

摘要：引言指令可以说是的核心，而其开发也是比较困难的，本文主要介绍指令的一些参数和的绑定策略。指令执行的优先级，用于多个指令同时作用于同一个元素时。改变父会影响指令，而改变指令不会影响父。在父和指令之间建立双向绑定。引言指令(Directive)可以说是 AngularJS 的核心，而其开发也是比较困难的，本文主要介绍指令的一些参数和scope的绑定策略。参数从 AngularJS ...

AndroidTraveler 2019-08-21 15:12 评论0 收藏0
理解和学习AngularJS（一）

摘要：为指令赋值函数名，即可运行。它也是一个对象，指向应用程序作用域内的所有元素和执行上下文。简而言之，是与指令元素相关联的当前作用域，可以理解为视图和控制器间的一个通道。它们被组织为模块形式，之后可以被另一个引用。 Angularjs Angular是一款主旋律的MVVM框架，框架和传统的库不同：类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类...

EastWoodYang 2019-08-22 10:58 评论0 收藏0
angularjs学习笔记—指令input

摘要：新增的日期选择器。类型必填必填最小长度最大长度正则匹配正则匹配更新触发即使没有使用校验属性，只要数据不符合格式，就会被更新成。 input[text] input一般和ngModel结合使用来实现双向绑定，同时angular提供了很多表单校验的指令 required 必填 ngRequired 必填（ngRequired可以控制是否是必填校验） ngMinlength 最小长度...

princekin 2019-08-21 10:28 评论0 收藏0