angularJS中directive父子組件的數據交互

時間 2019-11-09

標籤 angularjs directive 父子組件數據交互欄目 AngularJS 简体版

原文原文鏈接

angularJS中directive父子組件的數據交互html

1. 使用共享 scope 的時候，能夠直接從父 scope 中共享屬性。使用隔離 scope 的時候，沒法從父 scope 中共享屬性。在 Directive 中建立隔離 scope 很簡單，只須要定義一個 scope 屬性便可，這樣，這個 directive 的 scope 將會建立一個新的 scope，若是多個 directive 定義在同一個元素上，只會建立一個新的 scope。angularjs

2. directive 在使用隔離 scope 的時候，提供了三種方法同隔離以外的地方交互。這三種分別是app

（1） @：單向綁定，僅當父做用域的中的變量改變時，子做用域中綁定的變量才變化，反之不成立。dom

html函數

<body ng-app="app"  ng-controller="ctl1" style="text-align: center; line-height: 2em;font-size: 14px">
    <div>
        <div>父scope：
            <div>
                Say：{{name}}<br>
                改變父scope的name：<input type="text" value="" ng-model="name"/>
            </div>
        </div>
        </br></br></br></br>
        <div>隔離scope：顯示爲hello world,隨着父做用域中的name的改變而改變，</br>
            因爲是單向的，因此這裏的name改變不會對父做用域形成任何影響。
            <div test-directive name="{{name}}"></div>
        </div>
        </br></br></br></br>
        <div>隔離scope：不使用雙花括號name就直接顯示爲name了,不會隨着父做用域中的name的改變而改變。
            <div test-directive name="name"></div>
        </div>
    </div>
</body>

jsspa

    angular.module('app', []).controller("ctl1", function ($scope) {
        $scope.name = "hello world";
    }).directive("testDirective", function () {
        return {
            scope: {
                name: "@"
            },
            template: 'Say：{{name}} <br>改變隔離scope的name：<input type="buttom" value="" ng-model="name" class="ng-pristine ng-valid">'
        }
    })

效果：改變第一個input，則第二部分的name會跟着改變，改變第二個input，第一個不會跟着改變，即綁定是單向的，改變第三個input，第一個和第二個沒有任何影響，由於沒有綁定。.net

（2）. =：雙向綁定，僅當父做用域的中的變量改變時，子做用域中綁定的變量才變化，反之成立。（注意在子組件和父組件中進行數據綁定的寫法）雙向綁定

html code

<body ng-app="app"  ng-controller="ctl1" style="text-align: center; line-height: 2em;font-size: 14px">
<div>
    <div>父scope：
        <div>
            Say：{{parentName}}<br>
            改變父scope的name：<input type="text" value="" ng-model="parentName"/>
        </div>
    </div>
    </br></br></br></br>
    <div>隔離scope：顯示爲hello world,隨着父做用域中的name的改變而改變，</br>
        因爲是雙向的，因此這裏的子做用域中name改變也會使父做用域作出相同的變化。
        <div test-directive name="parentName"></div>
    </div
    </br></br></br></br>
    <div>這個會報錯
        <div test-directive name="{{parentName}}"></div>
    </div>
</div>
</body>

jshtm

<script>
    angular.module('app', []).controller("ctl1", function ($scope) {
        $scope.name = "hello world";
    }).directive("testDirective", function () {
        return {
            scope: {
                childName: "=name"
            },
            template: 'Say：childName <br>改變隔離scope的name：<input type="buttom" value="" ng-model="childName" class="ng-pristine ng-valid">'
        }
    })
</script>

效果

（3）. &：能夠使用在父scope中定義的函數。

html

<body ng-app="app"  ng-controller="ctl1" style="text-align: center; line-height: 2em;font-size: 14px">
<div>父scope：
    <div>Say：{{value}}</div>
</div>
<div>隔離scope：
    <div test-directive buttonClick="click()"></div>
</div>
</body>

angular.module('app', []).controller("ctl1", function ($scope) {
        $scope.value = "hello world";
        $scope.click = function () {
            $scope.value = Math.random();
        };
    }).directive("testDirective", function () {
        return {
            scope: {
                action: "&buttonClick"
            },
            template: '<input type="button" value="在directive中執行父scope定義的方法" ng-click="action()"/>'
        }
    })

效果：

3. 參考：https://blog.coding.net/blog/angularjs-directive-isolate-scope