angularJS中directive父子組件的數據交互
1. 使用共享 scope 的時候，可以直接從父 scope 中共享屬性。使用隔離 scope 的時候，無法從父 scope 中共享屬性。在 Directive 中創建隔離 scope 很簡單，只需要定義一個 scope 屬性即可，這樣，這個 directive 的 scope 將會創建一個新的 scope，如果多個 directive 定義在同一個元素上，只會創建一個新的 scope。
2. directive 在使用隔離 scope 的時候，提供了三種方法同隔離之外的地方交互。這三種分別是
（1） @：單向綁定，僅當父作用域的中的變量改變時，子作用域中綁定的變量才變化，反之不成立。
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>
js
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，第一個和第二個沒有任何影響，因為沒有綁定。
（2）. =：雙向綁定，僅當父作用域的中的變量改變時，子作用域中綁定的變量才變化，反之成立。（注意在子組件和父組件中進行數據綁定的寫法）
html
<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>
js
<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>
js
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