AngularJS calling from Parent to Child Directive controller function

Question

I am use to working in Angular and now I am on AngularJS ( The otherway round)

I've a directive:

<li  ng-mouseover="vm.setCurrentEditedTile(item.id)">
   <panel-buttons-directive ></panel-buttons-directive>
</li>

My panel-buttons-directive has a controller called ButtonsController. What I would like when user hovers on top of <li> element, it run a function that is inside the child controller. So that I have a separate "Module" where I have buttons HTML in the directive and function in the controller and from the parent I can call the function.

Link: https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

georgeawg georgeawg · Accepted Answer · 2017-07-27T13:26:26

One approach is to have the directive publish an API when initialized:

<fieldset ng-mouseover="pbdAPI.setCurrentEditedTile(item.id)">
  Mouseover Me
</fieldset>

<panel-buttons-directive on-init="pbdAPI=$API">
</panel-buttons-directive>

app.directive("panelButtonsDirective", function() {
  return {
    scope: { onInit: '&' },
    bindToController: true,
    controller: ButtonsController,
    controllerAs: '$ctrl',
    template: `<h3>Panel Buttons Component</h3>
               <p>Current edited tile = {{$ctrl.id}}</p>
               `,
  };
  function ButtonsController() {
    var $ctrl = this;
    var API = { setCurrentEditedTile: setCurrentEditedTile };
    this.$onInit = function() {
      this.onInit({$API: API});
    };
    function setCurrentEditedTile(id) {
      $ctrl.id = id;
    }
  }
})

The directive in the above example uses expression & binding to publish its API when initialized.

The DEMO

angular.module("app",[])
.directive("panelButtonsDirective", function() {
  return {
    scope: { onInit: '&' },
    bindToController: true,
    controller: ButtonsController,
    controllerAs: '$ctrl',
    template: `<h3>Panel Buttons Component</h3>
               <p>Current edited tile = {{$ctrl.id}}</p>
               `,
  };
  function ButtonsController() {
    var $ctrl = this;
    var API = { setCurrentEditedTile: setCurrentEditedTile };
    this.$onInit = function() {
      this.onInit({$API: API});
    };
    function setCurrentEditedTile(id) {
      $ctrl.id = id;
    }
  }
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app">
    <h3>Mouseover Component DEMO</h3>
    <p><input ng-model="item.id" ng-init="item.id='tile0'"/></p>
    <fieldset ng-mouseover="pbdAPI.setCurrentEditedTile(item.id)">
      Mouseover Me
    </fieldset>
    <panel-buttons-directive on-init="pbdAPI=$API">
    </panel-buttons-directive>
  </body>

AngularJS calling from Parent to Child Directive controller function

1 Answers

The DEMO