AngularJS directive with isolated scope - default attributes values

Question

I have a directive with isolated scope. In the scope there is a property - passed as a string ('@').

This attribute is optional - I want to set some default value to the property if no value is passed in the directive attributes. So I've written the following line of code:

scope.someProperty = scope.someProperty || "New Value";

But this does not work as I expected... the scope.someProperty remains empty.

I explored around a bit and understand that one way binding to isolated scope property (@) means that the parent value can be read but not write into. what I wish to do is to set the local directive property value and not to change the parent.

How can I do it?

Please see an example in this plunker.

Try scope.someProperty = "New Value"; and override it whenever necessary. Since angular is two way binding scope.someProperty = scope.someProperty || "New Value"; will bring unnecessary confusions. — sms
– sms, Commented Mar 31, 2015 at 10:38
Isolate scope prevents unnecessary confusions. Angular is not always two-way data binding – @ is for one way binding — Krzysztof Safjanowski
– Krzysztof Safjanowski, Commented Mar 31, 2015 at 11:02

Vinay K · Accepted Answer · 2015-03-31 12:25:08Z

4

Take a look at this plnkr

scope.someProperty = scope.someProperty || "New Value";

This assignment will set the someProperty value to New Value. But after the initial digest cycle because of scope: {someProperty: '@'} statement, angular updates the someProperty value to the corresponding attribute value which is empty.

Try this to provide the default value.

attrs.$observe('someProperty', function (nv, ov) {
  if (!nv) {
    scope.someProperty = "New Value";
  }
})

edited Mar 31, 2015 at 12:25

answered Mar 31, 2015 at 11:06

Vinay K

5,5721 gold badge20 silver badges27 bronze badges

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

8 Comments

user2717436 Over a year ago

This sounds very reasonable... do you have any solution for me? how can I give default values to optional attributes?

Vinay K Over a year ago

@user2717436, Please check the updated answer and plnkr.

user2717436 Over a year ago

Is this solution going to have a significant impact on the performance?

user2717436 Over a year ago

Do you have any documentation that confirm it? something I can show my managers for evidence?

Vinay K Over a year ago

I don't have any documentation to confirm it.

|

Collectives™ on Stack Overflow

AngularJS directive with isolated scope - default attributes values

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related