Typescript: Data bind between service and controller such that utilization of variable is simple

Question

Since value assignment doesn't bind data, this -> this.arrayVal = someService.arrayVal doesn't work. Is there a way to overcome this?

The goal here is to keep the assignment simple in HTML and controller ie. using Ctrl.arrayVal instead of Ctrl.someService.arrayval

Controller:

module Controllers {
    export class SomeController {

    arrayVal: Array<SomeModel>;

    static $inject = ['someService'];
    constructor(
    private someService: SomeService
    ){
         this.arrayVal = someService.arrayVal; 
//I would like to do this as it would keep the assignment simple in HTML -> Ctrl.arrayVal vs Ctrl.someService.arrayval
    }

}
}

Service:

class SomeService {
     arrayVal = $http.get('http://Address');
}

What you are trying to do will work in the controller. Your controller is getting a reference to the array in the service. However, if your service changes the array (like when the data is received) with a new assignment, you change the reference to a new array, which the controller is not using. To make what you want happen, you need to avoid creating the new array in the service. Keep that reference the same, and push/splice items in/out of it. — Sunil D.
– Sunil D., Commented Oct 24, 2015 at 16:36
@SunilD. It sounds good however, I would appreciate if there is another simple way of achieving this as the current suggestion seems like a hack. — Shyamal Parikh
– Shyamal Parikh, Commented Oct 24, 2015 at 18:05
this is the exact opposite of the issue you posted on asking for my assistance from. stackoverflow.com/questions/33184189/…. In your case, this is a reference assignment, because $http.get returns a promise object, and the problem occurs here because when you completely replace one reference with another, angular doesn't update the bindings. managing a local array and pushing/splicing data into and out of it is less of a hack than the alternative, which would involve using the $compile service. — Claies
– Claies, Commented Oct 24, 2015 at 23:51
@SunilD. @Claies Would angular.extend work for this purpose? replace this.arrayVal = someService.arrayVal; with angular.extend(this.arrayVal, someService.arrayVal); — Shyamal Parikh
– Shyamal Parikh, Commented Nov 2, 2015 at 13:18

basarat · Accepted Answer · 2015-10-27 04:07:44Z

1

Ctrl.arrayVal instead of Ctrl.someService.arrayval

You can just put someService directly on the scope. Then use someService.arrayVal in html and controller.

answered Oct 27, 2015 at 4:07

basarat

278k61 gold badges475 silver badges528 bronze badges

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

3 Comments

Shyamal Parikh Over a year ago

I am using controller as syntax so how would I be able to use someService.arrayVal directly?

Sunil D. Over a year ago

@ShyamalParikh Typescript will automatically turn public or private constructor args into member variables of the class. Since your service is already private, this should just work b/c the service is a property of the controller. It's probably the least hackiest solution proposed so far, I do this myself from time to time and not sure why I didn't suggest it :)

Shyamal Parikh Over a year ago

@SunilD. I will try this out. Currently, I made it work with angular.extend so that the address reference is not modified.

Collectives™ on Stack Overflow

Typescript: Data bind between service and controller such that utilization of variable is simple

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related