AngularJS スコープの学習-jsチュートリアル-php.cn

AngularJS スコープの学習

高洛峰

リリース： 2016-11-21 16:57:47

オリジナル

1149 人が閲覧しました

JavaScript プロトタイプ継承の概要
AngularJs には双方向のデータバインディングがありますが、すべての変更が対応する効果を生み出すわけではありません。これは、基本型の値が渡されたときに発生することがあります。この状況は JavaScript 自体にも存在するはずです。まずは穴を掘って、JavaScript をしっかり学んでから埋めていきます。

AngularJS スコープの学習

上の図は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 をそれぞれテストする小さなテストコードです。テスト結果はマークされています。コード内では、子スコープと親スコープのスコープです。

AngularJS スコープの学習

親スコープの属性と値

AngularJS スコープの学習

最初のng-repeatの最初の子スコープ、スコープは独自の項目属性と値を持ちます、ここでは基本的なデータ型であるためです、値を変更するときにプロトタイプチェーンにはアクセスしないため、親スコープの値とは異なります。 ng-repeat は複数の子スコープを生成し、各子スコープは独自の item 属性を持ちます。

AngularJS スコープの学習

2 番目の ng-repeat の最初の子スコープには、スコープ内に独自の項目属性と値があります。ここでの項目はオブジェクトなので、項目オブジェクトの値を変更すると、プロトタイプチェーンは次のようになります。 ngswitch が生成する子スコープでは、$parent が親スコープであることがわかります。ここでは ngswitch で nginclude を使用しているため、nginclude も独自のスコープを生成するため、childHead と childTail が存在します。 ngswitch は、true と false の場合にそれぞれスコープを生成します。これは、異なる ID 番号を持つ 2 つの異なるスコープです。

AngularJS スコープの学習