Confusing attributes in angularjs directive's link function

Question

I'm writing an angular.js directive, which would conditionally hide the element. So it would look like this:

link: function(scope, elem, attrs) {
      ...
      elem.hide()
}

I found a lot of examples that were doing exactly that, but somehow my elem attribute is an array not an element, so it does not have a hide() method. What am I missing?

Thanks!

Sorry it's not an array, and looks like the hide/show methods were removed from this object. — gsanta
– gsanta, Commented Oct 8, 2014 at 21:22

floribon · Accepted Answer · 2014-10-08 21:23:02Z

2

Most people are loading jQuery before they load angular, which extends its jqLite to the full jQuery.

The hide method doesn't seem to be part of jqLite API (https://docs.angularjs.org/api/ng/function/angular.element), hence such method is not exposed.

That doesn't mean you need jQuery, but that it is not the correct way to handle your problem. There are already the ng-show and ng-if directives to conditionnaly hide an element based on the controller, couldn't you use them?

In your html, add <div ng-show="isDisplayed">, and in your linking function scope.isDisplayed = false

answered Oct 8, 2014 at 21:23

floribon

19.2k5 gold badges56 silver badges68 bronze badges

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

1 Comment

gsanta Over a year ago

Oh, you are right, thanks :) I don't think that the ng-show is good to me here, I'm creating a directive, that flashes a message, when it's content changes, and then hides itself automatically after a time interval. So I think I need the custom directive here. But now I see that I have the css method withouth jquery, so I can use this: element.css("display","none")

Collectives™ on Stack Overflow

Confusing attributes in angularjs directive's link function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related