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

AngularJS scope 学习-LMLPHP

上图是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测试

    <!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'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'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'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'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'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'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's parent scope, parent scope's child scope</a><div ng-include="'login'"></div></div>
                <div ng-switch-when="true">
                <a href="#" ng-click="showScope($event)">switch's parent scope, parent scope's child scope, different with false case</a>
                <div ng-include="'logout'">
                </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's parent scope, parent scope's child scope</a><div ng-include="'login1'"></div></div>
                <div ng-switch-when="true">
                <a href="#" ng-click="showScope($event)">switch's parent scope, parent scope's child scope, different with false case</a>
                <div ng-include="'logout1'">
                </div>
            </div>
        </div>
    </body>
    </html>
登录后复制
    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的范围。

AngularJS scope 学习-LMLPHP

AngularJS scope 学习-LMLPHP

parent scope中的属性和值

AngularJS scope 学习-LMLPHP

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

AngularJS scope 学习-LMLPHP

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

AngularJS scope 学习-LMLPHP

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

AngularJS scope 学习-LMLPHP

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

09-14 01:34