AngularJS Updating attribute in directive linking function dynamically

Question

I have a directive that receives a string, which I would like the directive to then modify and add as an attribute's property.

HTML

<div directive ng-class="" otherAttribute="hello"></div>

JS

.directive('directive', function () {

return {

    link: function (scope, elem, attrs) {

            var classList = "{active: attrs.otherAttribute == 'hello'}";

            attrs.ngClass = classList;

            console.log(attrs);

        }

    }

})

This does seem to add the properties to the class property of the attrs object:

console.log(attrs);

$$observers: Object
$attr: Object
ngClass: "{active: attrs.otherAttribute == 'hello'}"
otherAttribute: "hello"
__proto__: Object

But the DOM is not updated. I've tried $compile, but that does not update the class attribute on the DOM either.

What am I missing? Many thanks!

Kirill Slatin · Accepted Answer · 2015-06-24 02:06:08Z

1

You can use interpolation and reference directive scope

 <div directive class="class1 {{classList}}" otherAttribute="hello"></div>

link: function (scope, elem, attrs) {
        scope.classList = "class2";
}

Pay attention that in your code there is an error, you reference an undefined scope.classList with an += operator, resulting in undefinedclass1 class2 literal. I suppose this might be a typo in example...

answered Jun 24, 2015 at 2:06

Kirill Slatin

6,1823 gold badges21 silver badges39 bronze badges

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

1 Comment

nikk wong Over a year ago

Seems like I was overthinking it. :-) Thanks for the help.

Ernesto Rendon · Accepted Answer · 2015-06-24 01:55:12Z

1

You can use the directive element to modify a css class.

Working example of your code: http://jsfiddle.net/egrendon/vvnu5yLx/1/

app.directive('directive', function () {
    return {
        link: function (scope, element, attrs) {
            scope.classList += "class1 class2";
            element.addClass(scope.classList);
            console.log(attrs);
        }
    }
});

answered Jun 24, 2015 at 1:55

Ernesto Rendon

3122 silver badges11 bronze badges

Collectives™ on Stack Overflow

AngularJS Updating attribute in directive linking function dynamically

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related