AngularJS scope 学习-js教程-PHP中文网

首页

web前端

js教程

AngularJS scope 学习

高洛峰

Nov 21, 2016 pm 04:57 PM

angularjs

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

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

childScope.aString === &#39;parent string&#39; //true 访问了原型链
childScope.aNumber === 100 //true 访问了原型链

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

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

    <!DOCTYPE html>
    <html ng-app="TestScopeModule">
    <head>
        <script src="**/angular.js"></script>
        <script src="scopeTest.js"></script>
        <script type="text/ng-template" id="login">
            <button ng-click="login()">login</button>
            <input type="checkbox" ng-model="loginData"/>
            <a href="#" ng-click="showScope($event)">switch&#39;s child scope,ng-include scope</a>
        </script>
        <script type="text/ng-template" id="logout">
            <button ng-click="logout()">logout</button>
            <input type="checkbox" ng-model="loginData"/>
            <a href="#" ng-click="showScope($event)">switch&#39;s child scope,ng-include scope</a>
        </script>
        <script type="text/ng-template" id="login1">
            <button ng-click="login1()">login</button>
            <input type="checkbox" ng-model="parent.loginData"/>
            <a href="#" ng-click="showScope($event)">switch&#39;s child scope,ng-include scope</a>
        </script>
        <script type="text/ng-template" id="logout1">
            <button ng-click="logout1()">logout</button>
            <input type="checkbox" ng-model="parent.loginData"/>
            <a href="#" ng-click="showScope($event)">switch&#39;s child scope,ng-include scope</a>
        </script>
    </head>
    <body>
        <div ng-controller="TestScopeCtrl">
            <div ng-repeat="item in list1">
                <label>Input {{$index+1}}</label>
                <input type="text" ng-model="item"/>
                <a href="#" ng-click="showScope($event)">parent scope&#39;s child scope</a>
            </div>
            <div>
                {{list1}}            
            </div>
            <hr/><hr/>
            <div ng-repeat="item in list2">
                <label>input{{$index+1}}</label>
                <input type="text" ng-model="item.text"/>
                <a href="#" ng-click="showScope($event)">parent scope&#39;s child scope</a>
            </div>
            <div>
                {{list2}}
            </div>
            <hr/><hr/>
            <div>
                <a href="#" ng-click="showScope($event)">parent scope</a>
            </div>
            <hr/><hr/>
            <div ng-switch on="loginData">
                <div ng-switch-when="false"><a href="#" ng-click="showScope($event)">switch&#39;s parent scope, parent scope&#39;s child scope</a><div ng-include="&#39;login&#39;"></div></div>
                <div ng-switch-when="true">
                <a href="#" ng-click="showScope($event)">switch&#39;s parent scope, parent scope&#39;s child scope, different with false case</a>
                <div ng-include="&#39;logout&#39;">
                </div>
                <a href="#" ng-click="showScope($event)">parent scope, not switch scope</a>
            </div>
            <hr/><hr/>
            <div ng-switch on="parent.loginData">
                <div ng-switch-when="false"><a href="#" ng-click="showScope($event)">switch&#39;s parent scope, parent scope&#39;s child scope</a><div ng-include="&#39;login1&#39;"></div></div>
                <div ng-switch-when="true">
                <a href="#" ng-click="showScope($event)">switch&#39;s parent scope, parent scope&#39;s child scope, different with false case</a>
                <div ng-include="&#39;logout1&#39;">
                </div>
            </div>
        </div>
    </body>
    </html>

    var TestScopeModule = angular.module(&#39;TestScopeModule&#39;, []);
    
    TestScopeModule.controller(&#39;TestScopeCtrl&#39;,[&#39;$scope&#39;,function ($scope) {
        $scope.list1 = [&#39;value1&#39;,&#39;value2&#39;, &#39;value3&#39;];
        $scope.list2 = [{text : &#39;value1&#39;},{text : &#39;value2&#39;},{text : &#39;value3&#39;}];
        $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。

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript数据类型：浏览器和nodejs之间是否有区别？May 14, 2025 am 12:15 AM

JavaScript核心数据类型在浏览器和Node.js中一致，但处理方式和额外类型有所不同。1)全局对象在浏览器中为window，在Node.js中为global。2)Node.js独有Buffer对象，用于处理二进制数据。3)性能和时间处理在两者间也有差异，需根据环境调整代码。

JavaScript评论：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。

Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

See all articles