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
– Whisher, Commented Dec 15, 2015 at 13:01
movieAs.movie would work if you would change this.movie instead reassign it here this.movie = response; — Grundy
– Grundy, Commented Dec 15, 2015 at 13:02
Understood , May i ask why 'this' moving to variable - variable is a just name — ShibinRagh
– ShibinRagh, Commented Dec 15, 2015 at 13:06
Possible duplicate of What underlies this JavaScript idiom: var self = this? — sp00m
– sp00m, Commented Dec 15, 2015 at 13:07

birkett · Accepted Answer · 2015-12-15 13:10:50Z

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, 2015 at 13:10

answered Dec 15, 2015 at 13:03

birkett

10.2k2 gold badges22 silver badges26 bronze badges

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

5 Comments

ShibinRagh Over a year ago

Understood , May i ask why 'this' moving to variable - variable is a just name

Grundy Over a year ago

@ShibinRagh, this depends on how function was called, see this post

ShibinRagh Over a year ago

one more question please - Is it good way that we are changing 'var vm = this' each controller at the top of the 'controller script'

birkett Over a year ago

Yes do that, it is good practice. only work with vm instead of this.

Renan Ferreira Over a year ago

A good recommendation is to use the vm syntax, as the guide says github.com/johnpapa/angular-styleguide

PSWai · Accepted Answer · 2015-12-15 13:09:42Z

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 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

Collectives™ on Stack Overflow

angular "controller as syntax" "this" data

2 Answers 2

5 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Linked

Related