Using "this" in ng-class expression

Question

I am trying to use 'this' in ng-class condition, but it doesn't work.

I am essentially trying this:

<div class=".." ng-class="{hidden: $(this).find(..).hasClass('trigger')}">
</div>

I would like AngularJS to apply the class 'hidden' based on the presence of a different class on a nested element.

Should I move the complex code to the controller? How can I reference the element ng-class is being defined on?

Regards!

`this` wont be a dom element there, it will be the scope itself, since scope has a self referencing property called this. Also this is not an angular way of approaching the problem as well. You may want to instead tie it to the property that enables the trigger. — PSL, Oct 29 '15 at 16:17
It is always recommended to put complex logic in JS code, and try to do things *Angular* way rather than relying on jQuery — Kulbhushan Singh, Oct 29 '15 at 16:25
This is beautiful discussion regarding, jQuery to Angular: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background — Kulbhushan Singh, Oct 29 '15 at 16:27
I guess that the `trigger` class is put on your element by another code (outside angular), am I right? — Fedaykin, Oct 29 '15 at 16:29
Thanks @Kulbhushan, the discussion you pointed me to is what i need to read. The trigger is populated by jQuery timer. For the record, there's no way to reference DOM 'this' ? — Patrik Beck, Oct 29 '15 at 16:35

score 1 · Accepted Answer · answered Oct 29 '15 at 16:56

In this case you probably want to create a custom directive. A good rule of thumb is that you should not do dom manipulation directly from a controller. In your case a custom directive would look like this:

...
.directive('applyTrigger', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var triggerEl = element.find(..);
            scope.$watch(function() {
                return triggerEl.attr('class'); }, 
                function(newValue){
                    if(triggerEl.hasClass('trigger')) {
                        element.addClass('hidden');
                    } else {
                        element.removeClass('hidden');
                    }

                });

        };
    }
});

And then you could use it on the parent div:

<div class=".." applyTrigger>
</div>

Give this a try and let me know what you find!

This works! Thanks for introducing me to the directives. After reading all your comments and extra reading I did, I have decided to re-architecture the whole thing. — Patrik Beck, Oct 30 '15 at 14:00

score 0 · Answer 2 · answered Oct 29 '15 at 16:29

0

You should use the controller to tell you if you should set a ng-class.

<div class=".." ng-class="{hidden: {{showthisdiv}}}">
</div>

Then in the controller set the showthisdiv.

answered Oct 29 '15 at 16:29

9ers Rule

164
1
1
14

1

If `showthisdiv` is on `$scope` or `vm`, I think its not required to use handlebars `{{ }}`, it should be `ng-class="{hidden: showthidiv}"` – Kulbhushan Singh Oct 29 '15 at 16:31

Using "this" in ng-class expression

2 Answers2