Using Directive to set ClassName

[mark goldin]

I am trying to apply a css to an element using Directive:

<div format-Filterspanel>

app.directive('formatFilterspanel', 

  function() {

    return {

      restrict: 'AEC',

      link: function(scope, element, attrs ) {

         // Cannot come up with anything that would work

      }

    };

}); 

can someone please help?

Thanks

[Sander Elias]

Hi Mark,

app.directive('formatFilterspanel', 
  function() {
    return {
      restrict: 'AEC',
      link: function(scope, element, attrs ) {

           element.addClass('addedName')
           element.removeClass('removedName')

           element.css({...});

           element[0].classList.add('addedName')
           element[0].classList.remove('removedName')

           element[0].classList.toggle(...)
           element[0].classList.contains(...)

      }

    };
});

Enough?

Regards
Sander

​

[mark goldin]

Thanks for the help.

element.addClass('addedName') did not work, but element[0].classList.add('addedName') did. Does it mean anything?

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/LpISsXVZWpg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Sander Elias]

Hi Mark,

The first one uses jQlite/jQuery, the second one is manipulation the DOM through its native interface.

I can't explain why the first one would not work. If you want to know, post an plunk showing the 

problem, and I will find the issue for you. (The plunk needs to be working!)

Regards

Sander

[Eric Eslinger]

As an aside, have you considered using the ng-class directive? It's pretty handy for programmatically (and declaratively) manipulating classes on an element. It's not always the answer, but I keep finding neat uses for it.

e

--

You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

[mark goldin]

Am I specifying it like this:

ng-class="{someclass}"

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/LpISsXVZWpg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

[Eric Eslinger]

Docs here: https://docs.angularjs.org/api/ng/directive/ngClass

But yeah, you can do it in a number of ways. You can say ng-class="{foo: expression1, bar: expression2, baz: expression3}", where any key in the object whose value evaluates to truthy will be added as a class to the element. I use this technique for stuff like adding an active class to some things. Prior to the current release, for example, ui-router's ui-sref-active directive didn't count sub-states as being active, so I had to make my own version using ng-class.

You can also do ng-class="makeClass()", where makeClass is defined on the scope and either returns a space-delimited list of class names (as a string) or an array of string class names. 

In any case, classes are added during the digest cycle appropriately.

hope this helps,

eric

[mark goldin]

Should something like this work then:

ng-class="{panel}" where panel is a name of a class from css file?