AngularJS: Setting properties while keeping a binding: is there a better way?

Question

If I have some property in a service that I want to set equal to the data I get back from a network call, I can do something like this:

//SERVICE//
thisService.property = data;
//SERVICE//

and in my controller I can do:

//CONTROLLER//
this.property = ThisService.property;
//CONTROLLER//

so that I can bind to it in the HTML and have it dynamically update:

//VIEW//
{{property}}
//VIEW//

However, as you may know, this does not work. The controller.property remains undefined, as this line:

thisService.property = data;

will create a new reference for thisService.property, and the old one, set in the controller, will not point to the new data.

So, what I have to do is wrap the data in another object, and do something like this:

//SERVICE//
thisService.property = {};
thisService.property.property = data;
//SERVICE//

//CONTROLLER//
this.property = ThisService.property;
//CONTROLLER

//VIEW//
{{property.property}}
//VIEW//

This is rather crude and ugly. Is there a better, cleaner way of achieving this?

a better oliver · Accepted Answer · 2015-09-23 20:38:41Z

2

Create a getter.

Object.defineProperty(this, 'property',
                      { get: function() { return ThisService.property; }});

Now the controller's property will always refer to the current service's property.

If the service's value is set only once and never changes again, then I'd recommend using a promise though. That would tell more about what's going on.

Plunker

answered Sep 23, 2015 at 20:38

a better oliver

26.9k2 gold badges64 silver badges67 bronze badges

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

Comments

dfsq · Accepted Answer · 2015-09-23 19:54:28Z

2

Another way is to expose service object to the view sos you don't have to make "crazy" stuff to your service:

this.service = ThisService;

and in view use

{{service.property}}

answered Sep 23, 2015 at 19:54

dfsq

193k26 gold badges244 silver badges261 bronze badges

2 Comments

dz210 Over a year ago

Yes but is this really better? This adds all the properties of the service to be watched and accessed, but I only want to access some of them. Is there any performance hit with doing this?

dfsq Over a year ago

I would say that it's not that bad actually. Nothing gets copied it's just a reference. In addition there are no additional watchers set up for service properties in this case. Performance hit is minimal.

Collectives™ on Stack Overflow

AngularJS: Setting properties while keeping a binding: is there a better way?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related