1

I have a directive that i only want active should an element have a certain class. for this i have attempted the following:

<feedback-analytics ng-if="$('#analyticTab').hasClass('active')"></feedback-analytics>

However when the class of the element changes the element is not displayed.

Has anyone done something similar and made it work?

Marc Rasmussen
  • 19,771
  • 79
  • 203
  • 364
  • If you want to show/hide your element, you should use "ng-show" or "ng-hide" instead, see: http://stackoverflow.com/questions/21869283/when-to-favor-ng-if-vs-ng-show-ng-hide – Aliz Mar 18 '16 at 12:25
  • @Aliz i need the directive to be rendered completely from new thats why i use ng-if - its a hack for a bug in the Chartjs lib – Marc Rasmussen Mar 18 '16 at 12:26
  • You could fire an event when the class appear on your element "analyticTab" (with a directive and $watch), and in the controller of your "feedback-analytics" if you catch the event you re-render your directive – Aliz Mar 18 '16 at 12:34
  • Why isn't jQuery tagged or mentioned in the title of the question? This is not purely an Angular question. – Ian Steffy Nov 28 '17 at 10:03

1 Answers1

3

Try something else:

In controller add a scope.$watch that watches over: $('#analyticTab').hasClass('active'). Anytime when the value is changed, it will call this watch.

Then create a scope variable of boolean type that will be false or true, depends on above condition.

In view change your code to this: <feedback-analytics ng-show="yourBooleanVariable"></feedback-analytics>

dpaul1994
  • 332
  • 3
  • 16
  • This would work 100% but im not using controllers and $scope as they will partly disappear in Angular 2 and using them is no longer best pratice :s – Marc Rasmussen Mar 18 '16 at 12:44
  • I see. Well I will think about something and if I can find something I will tell you :) – dpaul1994 Mar 18 '16 at 12:48