Angularjs: how to use "this" instead of $scope

Question

I would like to work out how to convert this:

 app.controller('AnswersCtrl', ['$scope', '$http', '$log', '$ionicModal', '$state',     'SuspectService', 
function($scope, $http, $log, $ionicModal, $state, SuspectService) {

    $scope.suspects = [];

    SuspectService.getSuspects().then(function(data){
        $scope.suspects = data;
    });

    $scope.goToClues = function(){      
        $state.go('clues')
    };


   }]);

into something that looks like this:

 app.controller('AnswersCtrl', ['$http', '$log', '$ionicModal', '$state', 'SuspectService', 
function($http, $log, $ionicModal, $state, SuspectService) {

    var self = this;

    self.suspects = [];

    SuspectService.getSuspects().then(function(data){
        self.suspects = data;
    });

    self.goToClues = function(){        
        $state.go('clues')
    };


   }]);

The code which utilises $scope works but the code which utilises this (self) doesn't.

I have tried a couple of variations and haven't been able to get it to work.

When you say it doesn't work, what do you mean? Is it giving you an error or is the view not populating? Can you submit a plunkr? — Abhishek Jain
– Abhishek Jain, Commented Nov 28, 2014 at 14:42
It doesn't display anything within the ng-repeat directive. There is no error message, just a lack of data. — James Satori-Brunet
– James Satori-Brunet, Commented Nov 28, 2014 at 15:52
Did Marc's answer help? If not, could you submit a plunker to demonstrate the problem? — Abhishek Jain
– Abhishek Jain, Commented Nov 29, 2014 at 15:05

Marc Harry · Accepted Answer · 2014-11-28 14:51:16Z

1

It looks like you are almost there in order for this syntax to work in your controllers you also need to change the markup where you define the controller to look like this:

<div ng-controller="AnswersCtrl as vm">
    {{ vm.suspects[0].name}}
</div>

You can see a working example without the extra services you have defined in you example here: http://jsbin.com/zevaluside/3/edit

You will also require Angular 1.2 or higher for this to work as well.

answered Nov 28, 2014 at 14:51

Marc Harry

2,43021 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

Angularjs: how to use "this" instead of $scope

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related