the 'this' keyword don't work for $http 'success' method in Controller of Angular

Question

I want to load a list of colleges from an ajax call and display in UI. I am using AngularJS framework for this example.

the bellow code if for College.html

<div class="page-header" ng-controller="CollegeController as collegeCntrl">
  <div class="page-header">
     <h3>Add/Manage Colleges</h3>
  </div>
<ng-view />     
</div>

The below code is for list.html,

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>College-ID</th>
            <th>College-Name</th>               
            <th>Edit College</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="college in collegeCntrl.collegeList | orderBy : 'collegeName'">
            <td>{{college.collegeId}}</td>
            <td>{{college.collegeName}}</td>                                        
            <td>
                <a href="#/college/edit" class="btn btn-primary" ng-click="collegeCntrl.editCollege(college)">Edit</a>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
          <td colspan="4">
            <a href="#/college/addPage" class="btn btn-primary active">Add College</a>
          </td>           
        </tr>
    </tfoot>
</table>

The below code is from college.js,

 angular.module("CollegeModule",[])
 .constant("collegeListURL","../rest/ser/college/list/One")
 .controller("CollegeController",function($location, $http, collegeListURL){
 $location.url("/loadingImage");

    $http.get(collegeListURL).success(function(data){
        this.collegeList = data;
        $location.url("/college/list");
    });

    this.editCollege = function(college){
       this.selectedCollege = college;
    }
}

in the above code please look at the code for

$http.get(collegeListURL).success(function(data){
    this.collegeList = data;
    $location.url("/college/list");
});

the 'this' keyword don't work for the success method, so i replaced the above code with the below block of code

(function(collegeCntrl){
    $http.get(collegeListURL).success(function(data){
        collegeCntrl.collegeList = data;
        $location.url("/college/list");
    });
})(this);

And it worked.

So my question is the code which worked for me can be a good practice in AngularJS controller, or there is a other way to refer 'this' ?

If you're going to use the college list on your HTML, you might aswell put it on the `$scope` directly. — Goodzilla, Sep 12 '14 at 09:32
but I read on some blog related to Angular.js that using 'this' in Angular's controller is a good practice. Is my understanding right ? — Rahul Shivsharan, Sep 12 '14 at 09:35
`this` doesn't refer to the controller within the callback function. — a better oliver, Sep 12 '14 at 11:25

score 1 · Answer 1 · edited May 23 '17 at 10:33

1

There's a question on the matter of this vs $scope.

The common use for $scope is anything that you want to access directly on your HTML.

You can use this for methods or attributes you'd like to keep away from the $scope. But I'd rather stay consistent and not mix this and $scope so I usually stick to $scope.

edited May 23 '17 at 10:33

Community

1
1

answered Sep 12 '14 at 09:50

Goodzilla

1,483
11
17

score 0 · Accepted Answer · answered Sep 12 '14 at 09:37

0

You should inject $scope in your controller and set $scope.collegeList = data;

Then in you html instead of college in collegeCntrl.collegeList, you just remove collegeCntrl.: college in collegeList

answered Sep 12 '14 at 09:37

Gustav

3,408
4
24
41

but this link tell's the best practise http://java.dzone.com/articles/angularjs-%E2%80%93-different-ways – Rahul Shivsharan Sep 12 '14 at 09:44
However `this` doesn't refer to the `$scope` in this case. – Jon Snow Sep 12 '14 at 09:49

the 'this' keyword don't work for $http 'success' method in Controller of Angular

2 Answers2