AngularJS calling from Parent to Child Directive controller function

ChrisGuru

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

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Calling a function in a parent directive from child directive

From Dev

Calling directive function from controller angularjs

From Dev

Calling a function from a child directive & using a variable in the parent directive

From Dev

AngularJS - Access a parent controller from child -> child directive with the controllerAs notation

From Dev

Calling directive's methods from parent controller in AngularJS

From Dev

Calling a parent directive's function in a child directive

From Dev

angularjs design. calling a directive function from another controller

From Dev

AngularJS: Requiring a parent directive from child directive

From Dev

AngularJS: Requiring a parent directive from child directive

From Dev

Trigger a function in a child directive from it's parent [angularJS]

From Dev

How to pass a value from an AngularJS directive to a function in parent controller

From Dev

Calling directive function from child directive not working

From Dev

Calling directive function from child directive not working

From Dev

Angular directive calling parent controller function

From Dev

angular calling controller function in from directive controller

From Dev

How can I access the function in child directive which passed from parent directive but defined in controller?

From Dev

AngularJs calling Controller from another one in directive

From Dev

Obtain access to a controller from a child directive in AngularJS

From Dev

Send Object From Directive to Parent Controller in AngularJS

From Dev

AngularJS - calling a controller function from a custom directive not working - controller method undefined

From Dev

calling a controller function from a link in a directive

From Dev

Calling controller function in a directive

From Dev

pass function from parent controller to directive with parameter

From Dev

AngularJS : Child directive scope to inherit from parent directive isolated scope?

From Dev

Calling user defined function from AngularJS directive

From Dev

Calling a function from custom directive on click? - AngularJS

From Dev

AngularJS Controller - Directive -> invokation of Controller function from directive

From Dev

Calling scope.$parent.function outside the directive in a controller

From Dev

ES6 Angularjs directive, passed in function from calling controller has no constructor variables

Related Related

  1. 1

    Calling a function in a parent directive from child directive

  2. 2

    Calling directive function from controller angularjs

  3. 3

    Calling a function from a child directive & using a variable in the parent directive

  4. 4

    AngularJS - Access a parent controller from child -> child directive with the controllerAs notation

  5. 5

    Calling directive's methods from parent controller in AngularJS

  6. 6

    Calling a parent directive's function in a child directive

  7. 7

    angularjs design. calling a directive function from another controller

  8. 8

    AngularJS: Requiring a parent directive from child directive

  9. 9

    AngularJS: Requiring a parent directive from child directive

  10. 10

    Trigger a function in a child directive from it's parent [angularJS]

  11. 11

    How to pass a value from an AngularJS directive to a function in parent controller

  12. 12

    Calling directive function from child directive not working

  13. 13

    Calling directive function from child directive not working

  14. 14

    Angular directive calling parent controller function

  15. 15

    angular calling controller function in from directive controller

  16. 16

    How can I access the function in child directive which passed from parent directive but defined in controller?

  17. 17

    AngularJs calling Controller from another one in directive

  18. 18

    Obtain access to a controller from a child directive in AngularJS

  19. 19

    Send Object From Directive to Parent Controller in AngularJS

  20. 20

    AngularJS - calling a controller function from a custom directive not working - controller method undefined

  21. 21

    calling a controller function from a link in a directive

  22. 22

    Calling controller function in a directive

  23. 23

    pass function from parent controller to directive with parameter

  24. 24

    AngularJS : Child directive scope to inherit from parent directive isolated scope?

  25. 25

    Calling user defined function from AngularJS directive

  26. 26

    Calling a function from custom directive on click? - AngularJS

  27. 27

    AngularJS Controller - Directive -> invokation of Controller function from directive

  28. 28

    Calling scope.$parent.function outside the directive in a controller

  29. 29

    ES6 Angularjs directive, passed in function from calling controller has no constructor variables

HotTag

Archive