AngularJS: код не работает при переборе объекта

Question

Я пытаюсь заполнить список employee объекты из моего контроллера empctrl в шаблоне.

Вот контроллер:

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();

});

Однако этот код, который я написал, не работает:

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

Ничего не отображается в пользовательском интерфейсе.
Вместо этого, если я напишу $scope.employees в контроллере работает:

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

Так как я знаю, как заманчиво это сделать $scope.<everything> в контроллере я пытаюсь избежать использования $scope как можно больше.

---

Если кто-то может продемонстрировать правильное использование $scope и разница между alias.abc а также $scope.abc (где alias это псевдоним контроллера), буду благодарен.

Редактировать: точно такой же вопрос заключается в следующем: "это" против $scope в контроллерах AngularJS

Спасибо за эту ссылку, PankajParkar.

Answer 1

Проблема в this который вы получаете доступ внутри populateTable функция не this который у вас есть в вашей функции контроллера.

Лучше держи this переменная внутри некоторой переменной, так что, имея ее, вы убедитесь, что вы ссылаетесь на правильный объект.

контроллер

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();
});

Для более подробной информации, я настоятельно рекомендую вам прочитать эту статью

Если вас смущают this против scope тогда прочитайте этот ответ

Answer 2

Добавьте ваши переменные в $scope вместо this лайк:

$scope.customers = {};

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

Редактировать: оба метода работают. Смотрите эту статью для подробного объяснения.

Answer 3

Подстановка "this" в vm (View-Model) решит вашу проблему. Не загрязнять объект $scope - отличная вещь. это глобальный контекст, и его значение зависит от вызова функции.

Итак, в вашем контроллере просто назначьте,

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

... и использовать объект vm в другом месте вашего контроллера. Будет полезно сохранить код чистым при работе с несколькими контроллерами в представлении.

Не забудьте дать псевдоним контроллеру,

<div ng-controller="MainCtrl as main">
    <div ng-repeat=" employee in main.vm.employeeList ">
        {{employee.name}}
    </div>
</div>