Discussion on the communication of instruction and instruction in Angularjs

Instructions This section is the hardest and most important section, so let's learn how to communicate between instructions and instructions.

First, we want to achieve the following results:

Ii. Source code Example

1. Controller Part code example
   

   /* * Accordion Collapsible Extension Menu example * involves instruction nesting, communication between instruction and instruction */mydirec.controller ("SomeController2", function ($scope) {$ Scope.expanders = [{title: ' Click me to expand ', Text: ' Hi there folks, I am the content that is hidden    But are now shown. '  }, {title: ' Click This ', text: ' I am even better text than you have seen previously '}, {title : ' Test ', text: ' This is a test,hh~ '}]; Defines the accordion directive used to coordinate the controller mydirec.directive (' accordion ', function () {return {restrict: ' EA ', Replace:tru                        E, transclude:true, Template: ' <div ng-transclude></div> ', controller:function () {                        var expanders = []; Used to close other expander this.gotopened = function (selectedexpander) {Angular.foreach (expanders, funct                    Ion (Expander) {if (Selectedexpander! = Expander) {Expander.showme = false;   }             });            };            Used to register expander This.addexpander = function (expander) {Expanders.push (expander);        }; }    };});/  /define Expander Directive mydirec.directive (' Expander2 ', function () {return {restrict: ' EA ',///can only be placed on element or attribute replace: True,//format can replace transclude:true,//To allow you to move the original child node of an identifier into the position of a new template require: ' ^?accordion ',//from the identifier on the same element to get the controller, the Controller is optional scope: {title: ' =expandertitle '}, Template: ' <div> ' + ' <div class= "title" ng-click= "Toggle ()" >{{title}}</div> ' + ' <div class= "Body" ng-show= "show Me "ng-transclude></div> ' + ' </div> ', link:function (scope, element, Attrs, Accord            Ioncontroller) {scope.showme = false;            Accordioncontroller.addexpander (scope);                Scope.toggle = function Toggle () {scope.showme =!scope.showme; Accordioncontroller.gotopened (scope);        }; }    };});

3. Page code example
   

   <div ng-controller= ' SomeController2 ' >    <accordion>            <expander2 class= ' expander ' ng-repeat= ' Expander in expanders "expander-title= ' Expander.title ' >                {{expander.text}}            </expander2>    </ Accordion></div>

   
   
   

Third, the analysis process

1. When the page loads, the expander is registered and then the output is traversed through ng-repeat, at which point the ShowMe property is false;
2. The toggle event is triggered when we click on one of these, and the ShowMe property changes to true to indicate that the text content can be displayed at this time. Of course, the use of the ng-show command, do not know the use of this property can be consulted.
3. Then call the Gotopend method to turn off the other expander that were not selected in turn.
   

your criticism can change my progress, please correct me!

Discussion on the communication of instruction and instruction in Angularjs