Directive间的通信

这个例子主要的难点在于如何在子Expander里面访问外层Accordion的scope中的数据

注释解读一下

JS代码：

var expModule=angular.module('expanderModule',[])

expModule.directive('accordion', function() {

    return {

        restrict : 'EA',

        replace : true,

        //这里没有定义scope，将使用元素上的scope，就是下面ng-controller指定的SomeController的scope

        transclude : true,

        template : '<div ng-transclude></div>',

        controller : function() {

            var expanders = [];

            this.gotOpened = function(selectedExpander) {

                angular.forEach(expanders, function(expander) {

                    if (selectedExpander != expander) {

                        expander.showMe = false;

                    }

                });

            }

            this.addExpander = function(expander) {

                expanders.push(expander);

            }

        }

    }

});

expModule.directive('expander', function() {

    return {

        restrict : 'EA',

        replace : true,

        transclude : true,

        require : '^?accordion', //依赖

        scope : {

            title : '=expanderTitle'

        },

        template : '<div>'

                   + '<div class="title" ng-click="toggle()">{{title}}</div>'

                   + '<div class="body" ng-show="showMe" ng-transclude></div>'

                   + '</div>',

        link : function(scope, element, attrs, accordionController) {

            //注意link的第四个参数

            scope.showMe = false;

            accordionController.addExpander(scope);//调用外层指令的方法

            scope.toggle = function toggle() {

                scope.showMe = !scope.showMe;

                accordionController.gotOpened(scope);//调用外层指令的方法

            }

        }

    }

});

expModule.controller("SomeController",function($scope) {

    $scope.expanders = [{

        title : 'Click me to expand',

        text : 'Hi there folks, I am the content that was hidden but is now shown.'

    }, {

        title : 'Click this',

        text : 'I am even better text than you have seen previously'

    }, {

        title : 'Test',

        text : 'test'

    }];

});

HTML代码：

<html ng-app="expanderModule">

    <head>

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <script src="../angular-1.0.3/angular.min.js"></script>

        <link rel="stylesheet" type="text/css" href="Accordion.css"/>

    </head>

    <body ng-controller='SomeController' >

        <accordion>

            <expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>

                {{expander.text}}

            </expander>

        </accordion>

    </body>

    <script src="Accordion.js"></script>

</html>

CSS代码：

.expander {

    border: 1px solid black;

    width: 250px;

}

.expander>.title {

    background-color: black;

    color: white;

    padding: .1em .3em;

    cursor: pointer;

}

.expander>.body {

    padding: .1em .3em;

}

运行效果：

require option

看看官网的原文怎么说

The myPane directive has a require option with value ^^myTabs. When a directive uses this option, $compile will throw an error unless the specified controller is found.

.The ^^ prefix means that this directive searches for the controller on its parents.

.The ^ prefix would make the directive look for the controller on its own element or its parents;

.without any prefix, the directive would look on its own element only.

.The ? prefix, if not found then pass null to the link as the fourth parameter

link函数的参数

Creating a Directive that Manipulates the DOM

link takes a function with the following signature, function link(scope, element, attrs, controller, transcludeFn) { ... }, where:

. scope is an Angular scope object.

. element is the jqLite-wrapped element that this directive matches.

. attrs is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values.

. controller is the directive's required controller instance(s) or its own controller (if any). The exact value depends on the directive's require property.

. transcludeFn is a transclude linking function pre-bound to the correct transclusion scope.