AngularJs -- Setting 'this' object within $http call in a controller?

Question

I've switched some Angular Js controller code from using the $scope object t "Controller as syntax with this".

However I can't quite get promises to update "this" correctly in my controllers.

For example in this case I'm making an $http call, and though it is getting called successfully, myProperty does not get updated.

   <div ng-controller="MyController as controller">
        {{controller.myProperty}}
    </div>

    <script type="text/javascript">
        function MyController($http) {
            this.myProperty = "First";
            this.myMethod = function(){
                this.myProperty = "Second";
                $http.get("someUrl.html").success(function(){
                    this.myProperty = "Third";
                });
            };
            this.myMethod();
        };
    </script>

Expected result -- "Third" , actual result - " Second"

Don't use this anyways. Add a parameter to your controller, called $scope, and set properties on that which you want to use in the HTML - that's what $scope is for. The problem with your code is that this changes per function, and definitely won't be the same this inside the success callback and the controller — Ian
– Ian, Commented Aug 22, 2014 at 16:45
@edhedges There's no technical problem, but why bother? Like I said, $scope is specifically for what the OP is trying to achieve - adding properties that the HTML can access. Why should you have to make a local variable, self in your example, and reference that everywhere? When you can just inject $scope and use it properly. — Ian
– Ian, Commented Aug 22, 2014 at 16:51
@Ian I understand how it works, but I come from knockout and personally enjoy using this as well as enjoy the way the controllerAs syntax looks in the view. That being said if the difference is purely preference based I feel the answer to this particular question would be to explain what was actually happening. — edhedges
– edhedges, Commented Aug 22, 2014 at 16:53
A good explanation of this vs. $scope: stackoverflow.com/questions/11605917/… . A great example is that when you use directives and pass it one of your controller methods, the this won't be what you expect if the directive calls the method. That's just a simple example, and can definitely cause confusion, just like this post — Ian
– Ian, Commented Aug 22, 2014 at 16:54
@Ian Last comment for me, as I don't want this thread to get too lengthy, but thank you for that link. Since they are different I suggest that you modify your code vicjugador, but definitely understand what's going on because this will most likely pop up again as you write more JavaScript. — edhedges
– edhedges, Commented Aug 22, 2014 at 16:58

edhedges · Accepted Answer · 2014-08-22 16:51:44Z

1

You need to capture the value of MyControllers this.

function MyController($http) {
    var self = this;
    self.myProperty = "First";
    self.myMethod = function(){
        self.myProperty = "Second";
        $http.get("someUrl.html").success(function(){
            self.myProperty = "Third";
        });
    };
    self.myMethod();
};

The problem is that inside the success callback this is given a different value.

edited Aug 22, 2014 at 16:51

answered Aug 22, 2014 at 16:46

edhedges

2,7282 gold badges31 silver badges63 bronze badges

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

Collectives™ on Stack Overflow

AngularJs -- Setting 'this' object within $http call in a controller?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related