current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 1 down vote favorite

This question already has an answer here:

I am trying to populate a list of employee objects from my controller empctrl in a template.

Here's the controller:

app.controller('employeeController', function ($scope, employeeService) {

    this.employees = {};

    this.populateTable = function (data) {

        this.employees = data;
    };

    var error = function (err) {
        console.log("Error: " + err);
    };

    // Call Service to List all Employees
    console.log("Service called to populate table.");
    employeeService.output().then(this.populateTable, error);
    this.populateTable();

});

However, this code that I wrote isn't working:

<div ng-repeat="employee in empctrl.employees.allEmployees" class="table_row">
    <div class="table_column" style="width:2%">{{ $index + 1 }}</div>
    <div class="table_column" style="width:8%">{{ employee.employeeName}}</div>
    <!-- 7 more columns -->
</div>

Nothing shows up in the UI.
Instead, if I write $scope.employees in the controller, it works:

<div ng-repeat="employee in employees.allEmployees" class="table_row">

Since I know how tempting it is to do $scope.<everything> in the controller, I'm trying to avoid using $scope as much as possible.

If someone could demonstrate the proper use of $scope and difference betwee alias.abc and $scope.abc (where alias is an alias of controller), I'll be thankful.

Edit: Exact same question is this: 'this' vs $scope in AngularJS controllers

Thanks for this link, PankajParkar.

share|improve this question

marked as duplicate by Pankaj Parkar angularjs Feb 26 at 9:51

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
    
Need to see more of your code (at least your controller code). Fiddle/plunker/codepen would be nice. – LJ.Wizard Feb 26 at 8:54
    
@LJ.Wizard What part of the code do you need? I'll add it. – cst1992 Feb 26 at 8:55
1  
Your controller code - empctrl by the looks of it. I assume you're using controller as syntax? – LJ.Wizard Feb 26 at 8:56
    
do you have use ng-controller="employeeCtrl as empctrl"(soemthing like this, assumed controller name as employeeCtrl) – Pankaj Parkar Feb 26 at 8:57
    
@PankajParkar yes, I do. – cst1992 Feb 26 at 8:58
up vote 2 down vote accepted

The problem is this which you are accessing inside populateTable function is not this which you have there in your controller function.

Better do keep this variable inside some variable, so that by having it you will make sure you are referring to correct object.

Controller

app.controller('employeeController', function ($scope, employeeService) {
    var vm = this;
    vm.employees = {};

    vm.populateTable = function (data) {
        vm.employees = data;
    };

    var error = function (err) {
        console.log("Error: " + err);
    };

    // Call Service to List all Employees
    console.log("Service called to populate table.");
    employeeService.output().then(vm.populateTable, error);
    vm.populateTable();
});

For more detail, I'd highly recommend you to readup on this article

If you are confused with this vs scope then do read up on this answer

share|improve this answer
    
So if I use var vm = this, it'll work inside functions too? – cst1992 Feb 26 at 9:06
    
@cst1992 yupe.. do try that.. – Pankaj Parkar Feb 26 at 9:08
    
If I use a function() syntax instead of var x = function() i.e. just write a declaration, will this still refer to the function rather than the controller? – cst1992 Feb 26 at 9:10
    
Works, thanks. Could you help me with the alias vs scope thing? I want to know scenarios when $scope is the ideal solution. In this case it wasn't, but it must be in some other? – cst1992 Feb 26 at 9:19
    
@cst1992 Ideally, if you ask me what to chose.. I'll recommend you to follow this instead of scope, as it will be best to access scope variable with aliases on view & will make you once step closer to angular2 migration.. Still if you want more detail you can refer this answer – Pankaj Parkar Feb 26 at 9:21
up vote 0 down vote

Add your variables to the $scope instead of this like:

$scope.customers = {};

$scope.populateTable = function (data) {
    $scope.employees = data;
};

Edit: both methods work. See this article for a in depth explanation.

share|improve this answer
    
Could you explain why? – cst1992 Feb 26 at 9:07
    
Everything you bind to the $scope will be available in your view, which is what the $scope variable is designed to do. – Ties Feb 26 at 9:09
    
@Ties this isn't correct answer..what OP wants to do is make working it with controllerAs approach.. which mean he have to have variable bounded to this context – Pankaj Parkar Feb 26 at 9:11
    
Just trying to explain why this is also a good option. Because using this can be difficult sometimes with function contexts. – Ties Feb 26 at 9:14
    
@Ties who said its difficult? – Pankaj Parkar Feb 26 at 9:37
up vote 0 down vote

Substituting "this" to vm (View-Model) will solve your issue. Not polluting $scope object is a groovy thing. this is a global context and its value depends on a function call.

So, in your controller just assign,

var vm = this;
  vm.empTable = function (data) {
  vm.employeeList = data.data; 
};

..and use the vm object elsewhere in your controller. It will be useful to keep the code clean while working with multiple controllers in a view.

Don't forget to give an alias name to the controller,

<div ng-controller="MainCtrl as main">
    <div ng-repeat=" employee in main.vm.employeeList ">
        {{employee.name}}
    </div>
</div>
share|improve this answer
    
Thanks for the meaning of vm, I didn't know about that. BTW, using any name works fine; I'm using Controller in my own code to know that this variable has the controller's this. – cst1992 Feb 26 at 9:54
    
Yes of course. Any name would be fine! – Vinay Feb 26 at 9:59

Not the answer you're looking for? Browse other questions tagged or ask your own question.