AngularJs中，如何在父元素中调用子元素为自定义Directive中定义的函数？

最近一段时间准备使用AngularJs中的自定义Directive重构一下代码。

在这里说明一下，把自定义控件封装成Directive并不一定是要复用，而是要让代码结构更加清晰。就好像你将一个长方法拆分成多个独立的小方法，也未必要复用它们一样。职责独立等一票好处，会让后期维护更加轻松。

在重构的过程中，我遇到了这样一个问题，先上图：

图一：

这就是我要重构的界面，由于之前时间紧，将这三个Filter和两个button都写在了一个页面中。当时我已经预感到，如果将这里面的状态都写到一个scope上，将出现后期近乎不可维护的灾难。尽管我已经将它们用ViewModel隔离，但代码结构依然让我很不满意。

你说啥？没看出来哪复杂。好，你等着，接下来让你看看里面啥样。

图二：

这是其中一个下拉框展开的模样。什么？你觉得这很一般呐？没看出它多么狰狞？好，你等着。上图三。

图三：

这是三哥展开之后的完全体。现在你应该明白将它们封装成directive是多么必要。

（上图中的这个产品是如今风靡全球的DocAveOnline，使用微软SharePoint的公司没有不知道的。啥？你没听过？偶，忘了说了，只有大公司才用得上）

我重构的思路很简单，将每一个下拉框都独立写成一个directive，然后将哥仨嵌入同一个Directive中，这个外层的directive里面包含Filter和Reset两个Button。

这里原本的交互逻辑是这样的，每个下拉框中的元素都有自己的初始化状态。但是不论你之前怎么霍霍，点击那个Reset按钮之后，要恢复每个下拉框的“出厂设置”。

每个下拉框的Directive拥有独立的scope是肯定的，一切自给自足，与外界无关。也就是说，每个下拉框的reset方法是封装在自己的Directive之中。

那么问题来了，我点击Reset按钮之后，怎么才能调用其子元素中的reset方法？

开始我尝试使用require和link的组合，我是想将reset方法封装到下拉框的controller中，然后在父元素中将三个下拉框对应的directive名字写到require中，这样我就能在父元素的link方法的第四个参数中取到，由这三个子元素controller组成的数组，这我就能轻松调用每个controller的reset方法。（本来controller的作用就是对外暴露API）

可写着写着我就发现不对，好像require只能找自己或者向父元素查找，没法由父元素发起向子元素查找的行动。（也许有，但没找到。如果你知道请在留言中告诉我。）

在江郎才尽的情况下，请教了我师父，他告诉我以下这种方法，其实一点儿都不难，就看你是否理解了自定义directive中，scope里面的，'='这个符号。

稍微懂点儿就知道，这是双向绑定的意思。那解决办法来了，代码如下：

Html部分:

<div ng-controller="myCtrl">
    <div>
        <inner-directive filter-model="filterModel"></inner-directive>
        <button ng-click="filterModel.reset()">click</button>
    </div>
</div>

Js部分:

 <script>
　　angular.module('app',[])
   　　.controller('myCtrl',function($scope){
       　　$scope.filterModel = {
           　　name:'xiaomablog'
           };
　　　　})
       .directive('innerDirective',function(){
       　　return {
          　　restrict:'E',
             scope:{
             　　filterModel:'='
             },
             template:'<div ng-bind="filterModel.name"></div>',
             link:function(scope,elem,attrs){
             　　scope.filterModel.reset = function(){
                　　console.log('reset');
                 };
             }
        }
   });
</script>

在innerDirective中的scope属性中，定义了filterModel这个双向绑定的属性，这就意味着directive内部可以霍霍这个属性，外部myCtrl中也可以霍霍这个属性，这样的话彼此都能调用对方霍霍的结果。

我贴心地下了断点，debug给你看：

第一步：

Angular的启动过程是先初始化外部的scope，也就是先执行myCtrl中的方法，给filterModel赋了一个对象；

（注意，此刻filterModel的值为undefined）

第二步：

（没添加reset方法之前，已经看到了之前加的name属性）

然后才执行directive的link方法，将scope与DOM紧紧地联系在一起。

第三步：

此时点击button，已经能调用reset方法了，并在console中打印出'reset'

大家可以尝试在myCtrl和innerDirective的link方法中加断点debug一下，亲自观察执行顺序，加深印象。

注意：

      我们了解锤子的方式 , 不是盯着它看 , 而是拿起来用。

　　　　　　　　　　　　　　　　　　—— 马丁·海德格尔

听马丁的话，赶紧去敲。