Unable to pass parameter from directive to controller function

Question

I can call the function from my directive but the parameter keeps being passed as undefined.

Here's the line from the directive

<input ng-click="delete(0)" type="submit" id="submit" value="Delete Feed" />

and here's the directive

<testdirective delete="deleteFeed()"></testdirective>

And here's the function

 $scope.deleteFeed = function(x){
  console.log(x);
  $scope.tweets.splice(x, 1);
}

and finally the directive itself

app.directive("testdirective", function() {
return {
  restrict: "E",
  templateUrl: 'app/main/tweetboard.html', 
  scope: {
    delete:'&'
  },

};

});

Thanks!

Can you try with a different function name? delete is reserved in JS, could be causing some issues. — Tom A
– Tom A, Commented Sep 17, 2014 at 18:33
Just tried it and got the same response. But good call anyway, I renamed it. — DaveS
– DaveS, Commented Sep 17, 2014 at 18:44

Alexey · Accepted Answer · 2014-09-17 19:43:58Z

Try following 2 things:

Replace the directive using by this: <testdirective delete="deleteFeed(feed)"></testdirective>
The pointed line from directive replace by <input ng-click="delete({feed:0})" type="submit" id="submit" value="Delete Feed" />

The point with @ binding form is that a function wrapper will be created & it will point to the original function. To call the original function with parameter you need to pass an object to the wrapper function, the key of the object is the name of the parameter.

Example from official angular docs:

Given <widget my-attr="count = count + value"> and widget definition of scope: { localFn:'&myAttr' }, then isolate scope property localFn will point to a function wrapper for the count = count + value expression. Often it's desirable to pass data from the isolated scope via an expression to the parent scope, this can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment(amount) then we can specify the amount value by calling the localFn as localFn({amount:22})

SoluableNonagon · Accepted Answer · 2014-09-17 19:06:20Z

0

try as attribute instead of scope

app.directive("testdirective", function() {
    return {
      restrict: "E",
      templateUrl: 'app/main/tweetboard.html', 
      link: function(scope, elem, attrs) { 
          if(attr.deleteFeed)
              scope.$apply(attr.deleteFeed);
      }
    };
});

HTML

<testdirective delete="deleteFeed()"></testdirective>

answered Sep 17, 2014 at 19:06

SoluableNonagon

11.8k11 gold badges59 silver badges100 bronze badges

Comments

ppff · Accepted Answer · 2014-09-17 19:53:15Z

0

Here is the working solution:

Plunkr

You forgot to pass in the parameter so it was always undefined.

// Code goes here

var app  =angular.module('test', []);

app.controller('testController', function($scope){
  $scope.x = "test";
  $scope.deleteFeed = function(x){
    alert(x);
  }
})

app.directive("testdirective", function() {
return {
restrict: "E",
template: '<input ng-click="delete(x)" type="submit" id="submit" value="Delete Feed" />',
scope: {
    delete:'&'
}
  };
});

answered Sep 17, 2014 at 19:53

ppff

3233 gold badges6 silver badges16 bronze badges

Comments

Chinh Vo Wili · Accepted Answer · 2015-03-24 09:04:35Z

0

It is simple way to pass pa-ram in function from directive to parent controller:

In parent view:

<div  menubar activatetab="cdCtrl.activateTab(id)"></div>

In directive:

<div ng-click="activatetab({id:10})>Click here...</div>

In parent controller:

$scope.activateTab(id) =function(){    
                alert(id);

}

Hope it working for you!!

answered Mar 24, 2015 at 9:04

Chinh Vo Wili

813 bronze badges

Collectives™ on Stack Overflow

Unable to pass parameter from directive to controller function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related