1

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"

vicsz
  • 9,552
  • 16
  • 69
  • 101
  • 3
    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 Aug 22 '14 at 16:45
  • "Dont use this anyways" -- Is AngularJs best practice not to use "Controller As, this"? -- I'm finding various answers. I'm finding the "Controller As" syntax is helping in dealing with nested controllers. – vicsz Aug 22 '14 at 16:49
  • @Ian Is there a technical problem with using the `controllerAs` syntax? If not I don't see a problem with capturing the value of the controllers `this` value in a variable. Especially seeing as that is the real problem with the question. – edhedges Aug 22 '14 at 16:50
  • 1
    @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 Aug 22 '14 at 16:51
  • 1
    @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 Aug 22 '14 at 16:53
  • 2
    A good explanation of `this` vs. `$scope`: http://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers . 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 Aug 22 '14 at 16:54
  • 1
    @edhedges It's not purely preference based (see my comment before this one). And you're 100% right that the answer to this question is what you posted. That's why I posted a **comment**, suggesting an **alternative** to that. – Ian Aug 22 '14 at 16:55
  • 2
    @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 Aug 22 '14 at 16:58
  • @edhedges Sounds good. I just wanted to explain as much as I could. Glad that link helps, it's definitely a good reference for this kind of situation. – Ian Aug 22 '14 at 17:01

1 Answers1

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.

edhedges
  • 2,722
  • 2
  • 28
  • 61