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>

    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>

<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