CODEWITHSUNDEEP
javascriptangularjs
Ali
Ali

Reputation: 267049

Angular JS directive not updating scope variable

I'm trying to build a simple directive in angularJs which accepts some config options via attributes, but if the attributes are not set, I want to set default values for the attributes.

Here's how I describe my scope:

scope :  {
            classes: '@',
            progress: '@'
         }

These attribs are displayed in the view in the following way:

<div class="{{classes}}">
    <div style="width: {{progress}}%;" class="bar"></div>
</div>

In the link function, I try to set the default values in this way:

link: function(scope, el, attrs)
        {
           console.log( scope.classes, scope.progress );
           if (typeof scope.classes === 'undefined')
               scope.classes = 'progress progress-warning';

           if (typeof scope.progress === 'undefined')
               scope.progress = 99;
           console.log( scope.classes, scope.progress );
        }

Here's the console output:

undefined undefined
progress progress-warning 99

So, it appears that in the scope the value is being set correctly. However in the actual html output, the attributes are not being rendered. Here's the resulting HTML:

<div class="">
    <div class="bar" style="width: %;"></div>
</div>

However if I supply these attributes inline when calling the attribute from html, e.g:

<my-directive data-progress="60" data-classes="progress" />

then it shows up fine:

<div class="progress" data-progress="60" data-classes="progress">
    <div class="bar" style="width: 60%;"></div>
</div>

My question is, when I just call <my-directive />, why does it not set the default values of progress and classes as its supposed to, from the link function? (And despite showing in console that it did)

Upvotes: 2

Views: 3129

Answers (3)

Michael Benford
Michael Benford

Reputation: 14104

Try this:

link: function(scope, element, attrs) {
    scope.classes = attrs.classes || 'progress progress-warning';
    scope.progress = attrs.progress || 99;
}

And you can ditch the scope : { classes: '@', progress: '@' } part of the directive.

I see you're having some hard time writing your directive. Check out this one I've implemented recently. Perhaps it'll help you wrap up yours.

Upvotes: 4

Deividi Cavarzan
Deividi Cavarzan

Reputation: 10110

Try this:

if (typeof scope.progress === 'undefined') {
       attrs.$set('progress', 99);
}

And set:

<div class="bar" style="width: {{progress}}%;"></div>

See this Plunker. It will set 99 if data-progress is not declared or if is data-progress=""

Upvotes: 2

Paul Nispel
Paul Nispel

Reputation: 761

change your scope to

scope: {
  ngModel: '@'
}

Upvotes: 0

Related Questions