Angular: function call as attribute value for directive

Question

This is a reduction of my directive:

app.directive('myDirective', function() { return { restrict: 'E', replace: true, template: '<form name="form" action="{{action}}" method="post" target="_blank">' + '<input type="hidden" name="item_name" value="{{itemname}}">' + '</form>', scope: { action: '@action', itemname: '@itemname', }, link: function(scope, element, attrs) { scope.action = attrs.action || 'http://www.example.com'; scope.itemname = attrs.itemname(); } }; });

and I use it this way:

<div ng-if="itemWasSelected"> <my-directive action="{{ 'http://www.example.com' }}" itemname="itemNameBuildFunction" /> </div>

In my controller, I have:

$scope.itemNameBuildFunction = function() { return $scope.value1 + $scope.value2; };

I would expect my directive, when it is linked (it is inside an ng-if clause, so, I mean, when the ng-if condition evaluates to true), to call attrs.itemname() $scope function, to assign scope.itemname variable in the controller's link function.

Instead, what I get is the error:

TypeError: attrs.itemname is not a function

Can you please give me some directions? As you can see, I'm quite confused, with angular directives... :-(

Have you closed the directive </my-directive> and also try scope.itemname = attrs.itemname; — MSH
– MSH, Commented Jul 18, 2016 at 14:16
what is this function attrs.itemname()? never saw it defined... also if it was defined as a function attrs convert into JSON objects. so you would have to use angular.fromJson(attrs.itemname) — Zargold
– Zargold, Commented Jul 18, 2016 at 14:17
@MandeepSingh: first advise: thanks, just corrected my answer; second advise: that way, in the produced form I get the string: itemname, which is not what I expect... :-( — MarcoS
– MarcoS, Commented Jul 18, 2016 at 14:24
@Zargold: attrs.itemname contains a string (itemNameBuildFunction) which is a $scope function name... — MarcoS
– MarcoS, Commented Jul 18, 2016 at 14:26
@MandeepSingh: no, it is not: I get the function name, and not the evaluated function result... :-( — MarcoS
– MarcoS, Commented Jul 18, 2016 at 14:36

RIYAJ KHAN · Accepted Answer · 2016-07-18 15:01:33Z

You don't need this statement attrs.itemname().

Your function reference passed in directive is bind to to the variable itemname on scope that is passed as first parameter in link function which isolated scope

Just change the statement from

scope.itemname = attrs.itemname();

To :

scope.itemname(); // this will call the function `itemNameBuildFunction`

EDIT :

You have used @ operator ofr binding function which is used in case passing primitive or object.You are passing function, so , you should use & operator,will evaluate as function.

scope: { action: '@action', itemname: '&itemname', }

EDIT 2: Yous should passed function itemNameBuildFunction() and not itemNameBuildFunction

<my-directive action="{{ 'http://www.example.com' }}" itemname="itemNameBuildFunction()" />

Working Plunker

@Zargold What is wrong?Can u elaborate or fixed it and what is duplicate
Duplicate means: Someone else answered the exact same thing 2 minutes before you did. Wrong means: It seems like the person asking the question does have a function for itemname but he didn't define it in the right place or something though can't be sure.
scope.itemname() produces: TypeError: scope.itemname is not a function
man first thing please check the right answer and mine one.Please check what duplicate you find there.Second one attrs.itemname will not evalute to expression that is why there is isolated scope is used.That is why is stating such error

Zargold · Accepted Answer · 2016-07-18 15:39:24Z

Seems to me that you actually want '=' type which will take in javascript objects and (without requiring JSON.parse) allow you to use them in your scope. A function is javascript object which can be run using the ();

So the best solution is: scope: { action: '@', itemname: '=', }, This will allow you to take a callback for the item name and then run it in the scope as you see fit.

https://plnkr.co/edit/cKzLhP4SwHey266Flr5w?p=preview.

Also, how would someone submit the form you offer? It doesn't seem to make sense you should have a <input type='submit'/> if you want to submit a hidden input name. Also, you probably want to use templateURL and include an HTML template instead of having a big dynamic form in you js.

Collectives™ on Stack Overflow

Angular: function call as attribute value for directive

2 Answers 2

13 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Related