angular "controller as syntax" "this" data

Question

I dont understand what I am missing

I dont get result on html i think this problem managing with controllerAs syntax

note: I can see the result in console console.log(this.movie); - its from controller

app.js

var app = angular.module('mfApp',['ngRoute', 'appControllers']);

app.config(function($routeProvider){
    $routeProvider.
    when('/:detail',{
            templateUrl: 'template/detail.html',
            controller : 'detailCtrl' ,
            controllerAs: 'movieAs'
    }).otherwise({
         redirectTo: '/'
    });
});

controller.js

var mfControllers = angular.module('appControllers', []);


mfControllers.controller('detailCtrl', ['$scope', '$routeParams', 'appServices',  function($scope, $routeParams, appServices){
    this.movie = [];
    this.id = $routeParams.detail;
    appServices.homeSearch(this.id).success(function(response){
        this.movie = response;
        console.log(this.movie);  
        // Yes, I do get array result in console
    });

}]);

html - template/detail.html

My try

{{movieAs.Title}} 
{{movieAs.movie.Title}} 
{{movie.movieAs.Title}}  
{{movie.Title}} {{title}}

var vm = this; vm.movie= [] this inside homeSearch is not the same of controller contest — Whisher, Dec 15 '15 at 13:01
`movieAs.movie` would work if you would change _this.movie_ instead reassign it here _this.movie = response;_ — Grundy, Dec 15 '15 at 13:02
Understood , May i ask why 'this' moving to variable - variable is a just name — ShibinRagh, Dec 15 '15 at 13:06
Possible duplicate of [What underlies this JavaScript idiom: var self = this?](http://stackoverflow.com/questions/962033/what-underlies-this-javascript-idiom-var-self-this) — sp00m, Dec 15 '15 at 13:07
Possible duplicate of [What does "this" mean?](http://stackoverflow.com/questions/4195970/what-does-this-mean) — Grundy, Dec 15 '15 at 13:08

Simone Zandara · Accepted Answer · 2015-12-15T13:10:50.750

4

mfControllers.controller('detailCtrl', ['$scope', '$routeParams', 'appServices',  function($scope, $routeParams, appServices){
    var me = this;
    me.movie = [];
    me.id = $routeParams.detail;
    appServices.homeSearch(me.id).success(function(response){
        me.movie = response;
        console.log(me.movie);  
        // Yes, I do get array result in console
    });
}]);

EDIT

In Javascript functions are stored as objects, so from your callbeck method inside succeess, you call this which refers to the method that you are running and not to the controller scope.

It is best practice to store the reference to the controller in a variable which can be accessed by the callback methods. me is quite an arbitrary name but widely used to refer as the parent caller. https://github.com/johnpapa/angular-styleguide

edited Dec 15 '15 at 13:10

answered Dec 15 '15 at 13:03

Simone Zandara

9,401
2
19
26

Understood , May i ask why 'this' moving to variable - variable is a just name – ShibinRagh Dec 15 '15 at 13:06
1

@ShibinRagh, `this` depends on how function was called, see [this post](http://stackoverflow.com/questions/4195970/what-does-this-mean) – Grundy Dec 15 '15 at 13:07
one more question please - Is it good way that we are changing 'var vm = this' each controller at the top of the 'controller script' – ShibinRagh Dec 15 '15 at 13:18
Yes do that, it is good practice. only work with vm instead of this. – Simone Zandara Dec 15 '15 at 13:21
1

A good recommendation is to use the vm syntax, as the guide says https://github.com/johnpapa/angular-styleguide – Renan Ferreira Dec 15 '15 at 13:21

score 1 · Answer 2 · answered Dec 15 '15 at 13:09

The problem is due to wrong this reference.

var mfControllers = angular.module('appControllers', []);

mfControllers
  .controller('detailCtrl', ['$scope', '$routeParams', 'appServices', function($scope, $routeParams, appServices) {
    var vm = this;

    vm.movie = [];
    vm.id = $routeParams.detail;
    appServices
      .homeSearch(vm.id)
      .success(function(response) {
        // vm !== this; here
        vm.movie = response;
        console.log(vm.movie);  
    });
  }]);

A good practice when using controllerAs syntax is to assign this to vm at the very beginning of a controller. It holds the reference of the controller correctly.

That is necessary because of javascript function scoping. It will be long to explain it here, but the gist of it is that function creates a new scope, this inside a function will be different. Todd Mott has a very great write up on this.

one more question please - Is it good way that we are changing 'var vm = this' each controller at the top of the 'controller script' — ShibinRagh, Dec 15 '15 at 13:21
@ShibinRagh yes. It serves two purposes: 1) it solves the `this` problem, 2) it is very clear that `vm` refers to the controller. By the way, `vm` means "View Model", which is what controllers really meant to be — PSWai, Dec 15 '15 at 13:48

angular "controller as syntax" "this" data

2 Answers2