AngularJS check if function exists in directive [duplicate]

Question

I have a directive with the following scope:

scope: {
  copyObject: '&',
  deleteObject: '&'
}

Now, I have a corresponding button in my template which looks like this:

 <button ng-click="copyObject()">Copy</button>

However, I would like to hide the button if there's no function applied to copy-object, for example:

<!-- Should show the copy button -->
<my-directive copy-object="copyObject()"></my-directive>

<!-- Should not show the copy button -->
<my-directive></my-directive>

So I applied the following to my template:

<button ng-click="copyObject()" ng-if="copyObject">Copy</button>

But this does not seem to work, if I check the directives real isolated scope, I notice that, even when the attribute is not entered, the function still exists, so the button is always visible.

Is it possible to detect if a function is bound to the copyObject() or not? And is it a good practice to do so? I'm not sure if the directive should be aware of the bound function or is this some kind of scope access violation?

An example: http://jsfiddle.net/azchpo5q/ (the second button should not be visible because there is no action bound to it).

The clicking is not the problem (that already works with brackets), but I would like to hide the button if no function is bound to it. I added a fiddle: jsfiddle.net/azchpo5q The second button should not be visible as it has no copy-object attribute. — Dimitri Mestdagh
– Dimitri Mestdagh, Commented Oct 29, 2014 at 10:53
I found the answer: stackoverflow.com/questions/21935099/… (I also voted to close as a duplicate) — Dimitri Mestdagh
– Dimitri Mestdagh, Commented Oct 29, 2014 at 11:03

Brandon O'Dell · Accepted Answer · 2016-05-19 18:05:06Z

3

You can use a function in ng-if to determine if the function is defined.

<button ng-click="copyObject()" ng-if="doShowCopy()">Copy</button>

Then define this method:

 $scope.doShowCopy = function() {
     return (typeof $scope.copyObject == 'function');
 }

edited May 19, 2016 at 18:05

Brandon O'Dell

1,1711 gold badge15 silver badges23 bronze badges

answered Oct 29, 2014 at 10:58

Prasad K - Google

2,5841 gold badge17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

dfsq Over a year ago

The problem is that typeof $scope.copyObject is always a function, because this is a wrapper function not direct function that comes from outer scope.

Prasad K - Google Over a year ago

Sure? I am guessing it might be defined in the scope, but not as a function!!

Dimitri Mestdagh Over a year ago

It is defined as a function yes, if I use directive.isolateScope().copyObject it returns a function. I solved it thanks to another question though, by using the attrs from the link() function. I marked it as a duplicate.

dfsq Over a year ago

Absolutely sure. This function which basically tries to evaluate a function in parent scope.

Dimitri Mestdagh Over a year ago

@Prasad It assumes that because the function is bound as &. So AngularJS knows that it should be a function and it returns a wrapper, like @dfsq mentioned. You can see it in this fiddle: jsfiddle.net/azchpo5q/2

|

Collectives™ on Stack Overflow

AngularJS check if function exists in directive [duplicate]

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Linked

Related