老規矩，先上效果圖：

首先說一下本文的重點：

1、父指令如何呼叫子指令中的方法；2、子指令如何呼叫父指令中的方法；（都不是通過廣播的方式）

如果有同學還不知道父指令如何通過[email protected]&給子指令傳遞引數，或者一些其他自定義指令的屬性（scope、complie、link……）的話，請查閱官網文件發或者其他文件部落格。

前言：

在自學了一段時間VUE之後，被VUE簡潔的程式碼以及強大的解耦能力深深折服，所有的介面元素都是元件，元件有聰明元件和笨元件之分，聰明元件就是業務元件，負責複雜的業務邏輯，而笨元件則負責一些基本的資料獲取功能，介面顯示等等，比如日期選擇外掛、輪播圖顯示等等，在開發的時候往往需要大量的笨元件。無奈公司標準產品的開發使用的是angularJs，一下子就有一種一夜回到解放前的感覺，這就跟從IntelliJIDEA回到eclipse的感覺是一樣一樣的。由於自學了一段時間VUE，搞的我現在使用angularJs也是使用VUE的思想，想方設法拜託angularJs中凌亂的程式碼，統統用指令解耦。

在angularJs中編寫自定義指令沒有VUE中編寫元件那麼方便，父子元件之間的通訊，作用域的互相引用等等，在angularJs中並沒有VUE中那麼清晰，所以在編寫自定義指令的時候需要特別注意一些問題。

這個demo是基於onsenui寫的，主要用了了裡面的ons-carousel輪播外掛以及ons-icon圖片兩個自定義指令，不過這個對本次總結沒有任何影響。

首先說一下介面結構，這個介面中有三個指令，第一個是page-tab，就是標題狀態列下面可以左右滑動的page1、2、3……的那一行，然後是下面白色區域的頁面page-content，最後是page-tabbar，page-tabbar包含了page-tab以及page-content，首先看一下主頁面的程式碼：

<ons-page class="hg-agency-item" ng-controller="hgAgencyItemController">
    <ons-toolbar>
        <div class="left">
            <ons-back-button></ons-back-button>
        </div>
        <div class="center">
            <span ng-bind="'這個是標題'"></span
 
>
        </div>
        <div class="right">
            <ons-toolbar-button>
                <ons-icon icon="ion-search"></ons-icon>
            </ons-toolbar-button>
        </div>
    </ons-toolbar>
    <ons-page class="c-p">
        <page-tabbar data="tabItems" tab-num="4"></page-tabbar>
    </ons-page>
</ons-page>

很簡單，就是在內容介面直接引用了page-tabbar指令，傳入兩個引數，data是資料，tab-num是page-tab顯示的tab的個數，然後看一下controller：

由於部分資料不方便顯示，所以打個碼：

name就是tab的顯示值，icon就是圖示。資料很簡單，用起來很簡單，這就是編寫自定義指令的目的。

name就是tab的顯示值，icon就是圖示。資料很簡單，用起來很簡單，這就是編寫自定義指令的目的。

首先來看page-tabbar的html程式碼：

<ons-page>
    <page-tab data="data" item-num="{{tabNum}}" on-click="pageContent.setActiveIndex(index)" var="pageTab"></page-tab>
    <page-content data="data" var="pageContent" postchange="pageTab.setActiveIndex(index)"></page-content>
</ons-page>

也是很簡單：

app.directive('pageTabbar', function () {
return {
restrict: 'E',
replace: false,
templateUrl: 'js/directives/page-tabbar/page.tabbar.template.html',
scope: {
data: '=data',
tabNum:'@tabNum'
},
controller: [
'$scope', '$element', '$attrs', '$transclude',
            function ($scope, $element, $attrs, $transclude) {
angular.element(document).ready(function () {
console.log('pageTabbar ready');
});
}
        ],
link: function (scope,element,attrs) {
        }
    }
});

這個指令的作用只是負責傳遞資料以及，當page-tab或者page-content改變時，通知另一個改變（呼叫指令中暴露的方法），這個是在html程式碼中寫的，指令宣告程式碼中沒有顯示呼叫子指令方法的程式碼，很簡便。

在<page-tab>中屬性var的值表示會在當前page-tabbat的作用域中建立一個pageTab物件，通過$scope.pageTab可以呼叫page-tab指令中暴露的方法；

接下來看page-tab指令：

html程式碼：

<div>
    <ons-carousel var="pageTabCarousel" ons-postchange="console.log('Changed to ' + $event.activeIndex)" overscrollable
                  style="height: 64px"
swipeable auto-scroll item-width="{{itemWidth}}">
        <ons-carousel-item style="background:transparent" ng-repeat="item in list" class="page-tab-carousel-item"
ng-click="onClickItem($index)">
            <div class="page-tab" ng-class="{true:'emphasize',false:'normal'}[currentIndex == $index]" ng-click="onClick({index:$index,item:item})">
                <div class="page-tab page-tab-content">
                    <ons-icon icon="{{item.icon}}"></ons-icon>
                    <span ng-bind="item.name"></span>
                </div>
            </div>
        </ons-carousel-item>
    </ons-carousel>
</div>

js宣告指令程式碼：

app.directive('pageTab', function () {
return {
restrict: 'E',
replace: true,
templateUrl: 'js/directives/page-tab/page.tab.template.html',
scope: {
list: '=data',
onClick: '&onClick',
itemNum: '@'
},
controller: [
'$scope', '$element', '$attrs', '$transclude',
            function ($scope, $element, $attrs, $transclude) {
angular.element(document).ready(function () {
pageTabCarousel.setActiveIndex($scope.currentIndex);
});
$scope.onClickItem = function (n) {
$scope.currentIndex = n;
n >= 1 && n--;
pageTabCarousel.setActiveIndex(n);
};
$scope.currentIndex = 0;
$scope.$parent.$parent[$attrs.var] = {
setActiveIndex: function (index) {
$scope.onClickItem(index);
}
                };
}
        ],
link: function (scope, element, attrs) {
var num = attrs.itemNum - 0;
scope.itemWidth = (100/num).toFixed(0)+"%";
}
    }
});

這裡只講重點，在這個page-tab子指令中，通過這一段程式碼：

$scope.$parent.$parent[$attrs.var] = {
setActiveIndex: function (index) {
$scope.onClickItem(index);
}
};

向父指令提供了一個物件，物件中的方法以及屬性就是子指令暴露的方法，父指令可以通過呼叫這個物件的方法通知子指令做出相應的改變；

同理，page-content也是一樣：

<ons-page
style="
position: absolute;
bottom: 0;
top: 64px;
left: 0;
right: 0px;
">
    <ons-carousel
var="pageContentCarousel"
ons-postchange="onCarouselChange()"
fullscreen
            swipeable
            auto-scroll
            overscrollable>
        <ons-carousel-item ng-repeat="item in list">
            <ng-include src="item.url"></ng-include>
        </ons-carousel-item>
    </ons-carousel>
</ons-page>

app.directive('pageContent', function () {
return {
restrict: 'E',
replace: false,
templateUrl: 'js/directives/page-content/page-content.template.html',
scope: {
list: '=data',
postchange:'&postchange'
},
controller: [
'$scope', '$element', '$attrs', '$transclude',
            function ($scope, $element, $attrs, $transclude) {
angular.element(document).ready(function () {
console.log('pageContent ready');
});
$scope.onCarouselChange = function () {
$scope.postchange({
index:pageContentCarousel.getActiveIndex()
                    });
};
$scope.$parent.$parent[$attrs.var] = {
setActiveIndex:function (index) {
pageContentCarousel.setActiveIndex(index);
}
                };
}
        ],
link: function (scope,element,attrs) {
        }
    }
});

在子指令中通知父指令做出變化的方法是，通過scope的@（對父作用域方法的引用）的方式，直接呼叫父指令傳遞的方法，呼叫方法的時候如果要傳遞引數，需要顯示傳遞引數的key以及value，比如程式碼中的

$scope.onCarouselChange = function () {
$scope.postchange({
index:pageContentCarousel.getActiveIndex()
    });
};

index就是需要傳遞的引數，在父指令方法中獲取引數的也是一樣，引數要一致：