logo
down
shadow

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


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

By : user2951103
Date : November 18 2020, 01:01 AM
This might help you This is possible by having the parent controller talk to the child controller through a well defined API, that you create. The idea is that you want to maintain loose coupling between the parent and the child directive by having each respective controller knowing as little about each other as possible, but still have enough knowledge to get the job done.
To achieve this, require the parent directive from the child directive, and let the child directive register itself with parent's controller:
code :
  require: '^parentDirective',
  controller: function(){
       this.someFunc = function() {...}
 },
  link: function(scope,element,attr, parentCtrl){
      parentCtrl.register(element);
 }
  controller: function(){
      var childCtrl = undefined;
      this.register = function (element) {
          childCtrl = element.controller();
      }
     this.callChildFunc = function (){
            childCtrl.someFunc();
     }

  },
  link: function (scope,element){
        var ctrl = element.controller();
         ctrl.callChildFunc();
  }


Share : facebook icon twitter icon
Angularjs Inter directive communication (parent-child directives) with a named ctrl of the parent directive

Angularjs Inter directive communication (parent-child directives) with a named ctrl of the parent directive


By : Timz95
Date : March 29 2020, 07:55 AM
seems to work fine Seems that my mistake was the functions on the controller are on $scope while they should have been attached to this. attaching to this allows the child directive scope to "know" about the ctrl methods . I updated the original plunker with the answer.
In AngularJS, how can I nest variable child directive(s) inside a parent directive?

In AngularJS, how can I nest variable child directive(s) inside a parent directive?


By : Muresan Anghel
Date : March 29 2020, 07:55 AM
I wish this helpful for you I'm not sure exactly why you can't just have a single directive, however something like the following might work. Instead of repeating the parent directive you just pass in the models and have that directive repeat and create each of the child directives.
code :
      <parent-directive the-models="models"></parent-directive>
       <div ng-repeat="model in models"....>
          <child-directive  ng-if="YOUR CONDITION"></child-directive>
          <child-directive2 ng-if="YOUR CONDITION"></child-directive>

       </div>
Calling parent directive scope function from child directive which triggers parent watcher

Calling parent directive scope function from child directive which triggers parent watcher


By : kjensenxz
Date : March 29 2020, 07:55 AM
it should still fix some issue Okay, after wrestling with this for a bit, I managed to produce a working version of a slimmed-down example:
code :
angular.module('myApp', [])
  .directive('calculatorForm', function() {
    return {
      restrict: 'A',
      replace: true,
      transclude: true,
      template: '<div ng-transclude></div>',
      link: function(scope, element, attrs) {
        scope.model = {};
        scope.price = {};

        scope.updateSelectedSpecs = function(attribute_id, prod_attr_val_id) {
          scope.$apply(function() {
            console.log('update selected specs');
            var selected_specs = {};
            selected_specs[attribute_id] = prod_attr_val_id;
            scope.model.selected_specs = selected_specs;
          });
        }

        scope.$watch('model.selected_specs', function(selected_specs, previous_selected_specs) {
          console.log('new selected specs', selected_specs, previous_selected_specs);
          if (selected_specs != previous_selected_specs) {
            console.log("and they're different");
          }
        });
      }
    };
  })
  .directive('calculatorAttribute', function() {
    return {
      restrict: 'A',
      template: "<input type='radio' name='attr{{attribute_id}}' ng-value='prod_attr_val_id'/>",
      replace: true,
      link: function(scope, element, attrs) {
        scope.attribute_id = attrs.attributeId;
        scope.prod_attr_val_id = attrs.prodAttrValId;

        element.on('click', function() {
          scope.$parent.updateSelectedSpecs(scope.attribute_id, scope.prod_attr_val_id);
        });
      }
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<form calculator-form ng-app="myApp">
  <input calculator-attribute attribute-id=1 prod-attr-val-id=1>
</form>
AngularJS calling from Parent to Child Directive controller function

AngularJS calling from Parent to Child Directive controller function


By : Hammad
Date : March 29 2020, 07:55 AM
hop of those help? One approach is to have the directive publish an API when initialized:
code :
<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;
    }
  }
})
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>
Calling child directive function from parent directive in AngularJs

Calling child directive function from parent directive in AngularJs


By : ZentriX
Date : March 29 2020, 07:55 AM
seems to work fine How to call a method defined in child directive, within a button click listener of parent directive. , In your parent directive
Related Posts Related Posts :
  • In HTML5, please explain the meaning of '?' in the statement
  • Form to use AJAX rather than a page refresh but also utilise error handling?
  • JQuery Script looping error
  • different size divs align top left
  • Image fade-in when webpage finishes loading
  • Seeking HTML5 audio element causes delay (breaks sync)
  • How can I read & write data to a new tab in Firefox?
  • jQuery or JS turn all words into italic type
  • iOS css -webkit-transform: scale doesn't offset touch events
  • Populate select list using javascript
  • Can you work out why my .js file doesn't seem to be linking to my html?
  • Make slideToggle effect only one element at a time
  • Output sound using JavaScript
  • What is the analytics.js equivalent of _trackPageview found in ga.js
  • How can I check if a JS file has been included already?
  • hasClass and condition not working
  • EDITED: I'm having issues with a button and its function
  • Importing XML in HTML with javascript
  • Create new function in contentScriptFile in Firefox extension
  • Should I build Node.js from source or download the OS X installer?
  • How to enforce integer sizes in JS? (TypeScript?)
  • How to update the JSON object without deleting old values using javascript
  • Reading a javascript variable containing a string into another file
  • Possible to prevent 403 errors from logging to the web console?
  • Jquery Accordion - Expand and collapse div on hover
  • jquery .hide() function - Hide mobile, Display Desktop
  • Holding password in javascript variable - security implications?
  • JQPlot trouble to render vertical stacked bar and horizontal legend
  • counts days inbetween then add class to those days with nested divs?
  • Marionette.js with Rails (Devise) Authentication
  • javascript anonymous function evaluation idiom
  • Why am I losing the decimal when working this equation in Javascript?
  • Site redirects to index.php after being open while making calls to an API using AJAX
  • How to determine when multiple callbacks are all done
  • How to update Yeoman dependencies?
  • How can I do a /resolve with the Soundcloud Javascript SDK?
  • I'm not able to call a named callback function
  • How to get value of Paragraph element contained in <div> in HTML using JavaScript
  • Javascript - Get value from textbox and save it on a string
  • Backbonejs collection not populated, but fetch works
  • when function's internal [[scope]] property is assigned?
  • Wrapping around the edges in a 2d array (game of life)?
  • Clone div with all nested elements along with events in pure javascript
  • How to get response text?
  • Setting and retrieving cookies in javascript
  • Passing parameter with double quotes
  • finding the meaning of the obfuscated javascript
  • Socket.io - Sending data from a pusher stream to the client
  • How to determine the visibility li's in a scrollable ul
  • How to create Scrolling Effect like Grouek website
  • How to display a state in parents template in ui-router
  • Angular ng-repeat - creating collection dynamically
  • finding advertisements on a page with javascript
  • Is there a way to cause a Grunt plugin to fail if input files are missing?
  • JQuery datepickers- setting end date from a start date
  • javascript - explanation request of a behaviour
  • Converting String into date format in JS
  • Choose element Angular
  • Display background grid by using image with CSS
  • Call function from another Controller in another file AngularJS
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org