AngularJS call common functions in a directive template

AngularJS call common functions in a directive template

By : hagerhink
Date : November 22 2020, 10:56 AM
I wish this help you The behavior you are getting of method being called two to three times is okay. From the angular documentation:
code :

Share : facebook icon twitter icon
AngularJS: Call external functions from directive?

AngularJS: Call external functions from directive?

By : Helena Shaw
Date : March 29 2020, 07:55 AM
Hope that helps I'm trying to create a custom component that uses external functions defined in the controller, but I'm experiencing different problems. , For example, you can use the & binding, like:
code :
scope: {
    'fctn': '&extFunction'
How do I call a method on an Angularjs directive from outside it's template?

How do I call a method on an Angularjs directive from outside it's template?

By : Kevin Kalb
Date : March 29 2020, 07:55 AM
I hope this helps you . The way this sort of thing is usually handled is by coordinating using a service. The state is managed by the service, and the directive only responds to changes in the state as far as it needs to modify the DOM, hide or display elements, etc. Your controllers outside can also have this service injected and call methods to change the state, such as move the step forward or back, reset the wizard, etc.
It's possible that the service would broadcast events for state changes, such as the step changing, and the directive would listen in on those events to update the view.
code :
.factory('wizard', function() {
  // private state
  var state = {
    steps: [],
    selectedIndex: 0,

  // public methods for manipulating the state
  return {
    next: function() {
      var i = state.selectedIndex + 1;
      if (i < state.steps.length) this.select(state.steps[i]);
    prev: function() {
      var i = state.selectedIndex - 1;
      if (i > -1) this.select(state.steps[i]);
    select: function(step) {
      for(var x = 0; x < state.steps.length; x++){
        var current = state.steps[x];

        if ((angular.isNumber(step) && step === x) || current == step) {
          current.selected = true;
          state.selectedIndex = x;
        } else {
          current.selected = false;
    addStep: function(step) {

      if (state.steps.length === 1) this.select(step);
    // lets a consumer get or set the current state. this is how the wizard directive grabs the state which is binds to in the template
    state: function(newState) {
      if (arguments.length === 0) return state;
      if (newState) {
        state = newState;
        if (!state.steps) state.steps = [];
        if (isNaN(state.selectedIndex)) state.selectedIndex = 0;
Call controller functions inside directive in AngularJS

Call controller functions inside directive in AngularJS

By : Type2Designs
Date : March 29 2020, 07:55 AM
it should still fix some issue First of all i highly recommend you not to put dom event logic inside a controller, it goes against everything done by the angular team to prevent that from happenning.
What i'd do in your situation would be to create a directive somewhat like this:
code :
.directive('scrollAnchor', function($state) {
    return {
        link: function(scope, element, attrs){
            scope.startListenToScroll = function(){
                var position = element.position();
                    min: position.top,
                    max: position.top + $(this).height(),
                    onEnter: function(ele, position) {
                        } else {
            scope.stopListenToScroll = function(){
        controller: function($scope){
            this.startListenToScroll = $scope.startListenToScroll;
            this.stopListenToScroll = $scope.stopListenToScroll;
.directive('scrollTo', function() {
    return {
        require: 'scrollAnchor',
        link: function(scope, element, attrs, scrollAnchorCtrl) {
            element.bind('click', function() {
                var divPosition = $('#'+attrs.scrollTo).offset();
                $('html, body').animate({
                scrollTop: divPosition.top
                }, "slow", function(){
Where To Put AngularJS Directive-Template Functions

Where To Put AngularJS Directive-Template Functions

By : Jan
Date : March 29 2020, 07:55 AM
hop of those help? If I do something like this in my directive: , Doing something like this will serve your purpose. Give a try ..
code :
angular.module("myApp", [])
            .directive("mydiv", function() {
                return {
                    template: '<button ng-click="Done()">DONE</button>',
                    link: function (scope, element, attrs) {
                    scope.Done = function () {
 $scope.Done = function() {
Call controller function from directive template in AngularJS

Call controller function from directive template in AngularJS

By : Sharon Toure
Date : March 29 2020, 07:55 AM
help you fix your problem You can define your controller in your directive like so, and add an ng-click directive to the button element 'Confirm' in your template.
Related Posts Related Posts :
  • AngularJS - Does $resource requests send cookies automatically?
  • Communication between two nested directives angularjs
  • what can or cannot be done with a controller created in a module Vs controller created globally?
  • Angularjs - add ng-* attributes using directives
  • Why are my Angular, absolute path, URL's not compiling properly with Closure Compiler?
  • AngularJS routing not working properly in PhoneGap
  • AngularJS: Create new scope variable name using a variable value
  • Directive scope update does not update controller scope (AngularJs)
  • Unit-test a angular controller function in a directive
  • jQuery Sparkline in a cell in ng-grid using CellTemplate and Directive
  • AngularJS determine filter in controller
  • How to deploy an app using ionic framework to Amazon? (elastic beanstalk prefered)
  • Conditional injection of a service in AngularJS
  • Filtering on object properties not working
  • Open $modal from the service and pass variables to the controller
  • ngClick evaluated against scope instead of isolateScope
  • onEnter and onExit are not called when state is left/activated in angularjs ui router
  • Shared client & server modules with angularjs and pongular
  • Getting the angular app to run when using protractor
  • Angularjs: create a link for download different types of file
  • AngularJS: On Change of Parent DropDown Option Also Changes the Dependant Drop Down Options Associated with Other Parent
  • Angular HTML5 mode, Wordpress, Rewrites, Apache and You
  • Using angular js form validations in <form:input> tag
  • AngularJS Promise resolved incorrectly
  • properly clearing whole AngularJS ui-grid chart
  • Can not figure out how to store $rootScope in angular.bootstrap
  • animate.css animation within angularjs 1.3 using ngAnimate gives different animations in Firefox
  • Auth0 IE Issue: Unable to get property 'frames' of undefined or null reference
  • Am I misusing directives with too much logic?
  • Use an Angular JS value as a parameter of TWIG "path" function in Symfony 2
  • multiple function on ng-click angularjs
  • Converting $.ajax call to $http call in angular 404 error
  • Angularjs templateUrl file location not found
  • How to execute the function after change page in angularjs?
  • Pass variable to AngularJS directive without isolated scope
  • OAuth, Custom Login, or Both
  • Angular Directive: Isolate Scope & Transclude is true, but HTML in the directive needs to continue to bind to parent
  • Compare objects in angularjs
  • Combine "Checkbox" & "Avatar" in an Ionic Framework List
  • Issue with the Angular UI router when inheriting from a parent state
  • Is there a way to initialize an Angular Service without DI into controller
  • Why is a parent controller's $scope not accessible from a (child) directive?
  • How to get back button in Ion-tabs page
  • AngularJS bind class attribute to model
  • How can I get AngularJS ui-router to respond correctly to a browser page refresh?
  • Angular validation does not work
  • Breez Create Complex Entities
  • Drag and drop using protractor in dthmlx component
  • In Angular JS, what is the default 'cache' value that is used when sending request with $http service?
  • How to change placeholder for single textbox in angular?
  • $ is not defined - jquery angular mixing
  • CORS issue angularjs and spring security
  • Angularjs cannot select last item in dropdown the first time
  • Angularjs - $watch issue
  • On change radio button to no the span should hide in angular
  • Creating a wordcloud generator in Angularjs
  • Angular UI Bootstrap collapse - whats wrong?
  • AngularJS after redirect from app to app, the default page is not loading
  • Why does my scope update my factory and my factory update my scope when it should not?
  • AngularJS testing $httpBackend.whenGET().respond() not working with number as parameter
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org