Implementation of accordion menu angularjs with user defined instruction

Time:2021-7-20

0x00 Preface

Custom instruction is a difficult point in angular. After writing for such a long time, I only know some simple single instructions. Take out the example of accordion in “developing next generation web applications with angularjs” and have a good look at it.

This example is relatively simple on the whole, but we still need to understand some points:

  1. Custom instruction syntax

  2. Instruction independent scope: This is used for bidirectional binding=

  3. Instruction include

  4. The command controller: requires the controller as the fourth parameter of the link function

  5. Instruction link function: each instruction is executed once, while compile compiles only once

0x01 effect

Implementation of accordion menu angularjs with user defined instruction

It’s very simple to click on a current expansion and other collapses
The expander loops from the controller

Preview:https://jsfiddle.net/savokiss/fh5sv52u/

0x02 View

  <accordion>
      <expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>
          {{expander.text}}
      </expander>
  </accordion>

Two custom directives, accordion and expander, are required

0x03 Controller

  $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'
  }];

There is only one array that defines the title and text of the expander

0x04 Directives

Parent instruction accordion

myModule.directive('accordion',function(){
  return {
          restrict : 'EA',
          replace : true,
          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);
              };
          }
      };
});

This is the parent command of accordion menu. Its main functions are as follows:

  1. expandersData used to store subinstructions (i.e. subset scope)

  2. addExpanderMethod is used to initialize the expanders array when a subinstruction calls the link function

  3. gotOpenedMethod is used to provide the subinstruction to close other expanders

Subset instruction expander

myModule.directive('expander', function(){
  return {
          restrict : 'EA',
          replace : true,
          transclude : true,
          require : '^?accordion',
          scope : {
              expanderTitle : '='
          },
          template : '<div>'
                   + '<div class="ex-title" ng-click="toggle()">{{expanderTitle}}</div>'
                   + '<div class="ex-body" ng-show="showMe" ng-transclude></div>'
                   + '</div>',
          link : function(scope, iElement, iAttrs, accordionController) {
              scope.showMe = false;
              accordionController.addExpander(scope);
              scope.toggle = function toggle() {
                  scope.showMe = !scope.showMe;
                  accordionController.gotOpened(scope);
              };
          }
      };
});

This instruction states:

  1. requireSince the accordion instruction is used, the last parameter of the link function is the controller of accordion

  2. In the independent scopeexpanderTitleIt is used to bind the title in the controller bidirectionally

  3. transcludeIt is used to pass the code in the view directly. Of course, only the text of the expander is shown here

  4. Link function provides flag:scope.showMeTo control the expansion state of the expander

  5. Link functionshowMeTo false, initialize to add the scope of the current instruction to the expander array of the parent instruction

  6. Provide for yourselfscope.toggleMethod, which is used to toggle the switch state and call the parent instruction to close other siblings

End of 0x05

Basically, these are the points. When you get all of them, you can almost write similar instructions~

Recommended Today

SQL exercise 20 – Modeling & Reporting

This blog is used to review and sort out the common topic modeling architecture, analysis oriented architecture and integration topic reports in data warehouse. I have uploaded these reports to GitHub. If you are interested, you can have a lookAddress:https://github.com/nino-laiqiu/TiTanI recorded a relatively complete development process in my hexo blog deployed on GitHub. You can […]