Adding classes to the html markup in the custom directive's template

Question

When defining a custom directive, both link and compile functions get the 'element' as an argument which comes handy for adding classes to it. However, if the directive is an 'Element' directive, and the 'replace' field is set to false (as trying to avoid using this depreciated field), the element argument in the compile and link functions is the original directive's element (<some-widget>), and not the element in the template(<div>), so any added classes will be ignored by the browser.

Question: What is the best practice to dynamically add classes to the HTML markup in the template? (I can obviously insert classes as strings, but that feels dirrrty)

angular.module('app', [])
    .directive('someWidget', function () {
        return {
            restrict: 'E',
            replace: false,
            template: '<div>This is the template</div>',
            link: function (scope, element) {
                element.addClass("orange");
            }
        };
    });

The resulting HTML will be as follows:

<some-widget class="orange">
    <!-- The orange class is ignored-->
   <div>This is the template</div>
<some-widget>

You want to dynamically add classes based on what? Why can't you just put it in the template? Or you could just make it work with attribute restricted directives. — PSL
– PSL, Commented Dec 23, 2014 at 20:41
I am asking the question in general. (I could be adding classes based on what the attributes are or based on some computation in a controller I add later). My question is specifically about, adding classes to the element in the template, as in this case I cannot use element.addClasss() — Crocodile
– Crocodile, Commented Dec 23, 2014 at 20:47
yes but why is it working for me below? that OP asked in other question — A.B
– A.B, Commented Dec 23, 2014 at 20:50
@Crocodile see my answer and run console. as far as i have understood.. — A.B
– A.B, Commented Dec 23, 2014 at 20:59

A.B · Accepted Answer · 2014-12-23 21:11:56Z

Adding classes to directive when using replace set to false will add them to directive that is pretty much same as applying on div

if you set attributes on directive <some-widget class="orange red"> that will be replaced with but attributes will remain there like <div class="orange red">This is the template</div>

Actually what happens is that all the attributes of the original DOM node are merged with those in the template's root node

Working example see console to verify

 angular.module('app', [])
        .directive('someWidget', function () {
            return {
                restrict: 'E',
                replace: true,
                template: '<div>This is the template</div>',
                link: function (scope, element) {
                 
                  
                }
            };
        });

.orange{color:red;}

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app="app">
    <some-widget class="orange red">
       
       
    </some-widget>
      </div>

Collectives™ on Stack Overflow

Adding classes to the html markup in the custom directive's template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related