AngularJS получение данных от контроллера по директиве

Question

Я пытаюсь отображать данные, полученные из базы данных в контроллере, в директиву. Я использую Controller как синтаксис, но когда я пытаюсь отображать свои данные в директиве, он не определен. Я получаю правильное значение для переменной name и example, но не для переменной items.

TaskCtrl.js

app.controller('TasksCtrl', ['$scope', 'TaskService', function ($scope,  TaskService) { 
    // initialize function 
    this.newTask = true; 
    this.name = "My name is Nedim"; 
    this.example = "Example"; 

    this.templates = { 
     new: "views/task/addTask.html", 
     view: "views/task/viewTask.html" 
    }; 

    // load all available tasks 
    TaskService.loadAllTasks().then(function (data) { 
     this.items = data.tasks; 
    }); 

    $scope.$on('newTaskAdded', function(event, data){ 
     this.items.concat(data.data); 
    }); 

    return $scope.TasksCtrl = this; 

}]); 

taskList.html

<ul class="list-group"> 
<li ng-repeat="item in taskCtrl.items" class="list-group-item"> 
    <a ng-click="openItem()"> 
     <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> 
     <span>{{item.name}}</span> 
     <span class="task-description">{{item.description}}</span> 
    </a> 
</li> 
</ul> 
<div>{{taskCtrl.name}}</div> 
<div>{{taskCtrl.example}}</div> 
<div>{{taskCtrl.items}}</div> 

директива entityTaskList

app.directive('entityTaskList', function(){ 
return { 
restrict: 'E', 
templateUrl: 'views/task/taskList.html', 
scope: { 
    items: '=' 
}, 
bindToController: true, 
controller: 'TasksCtrl as taskCtrl', 
link: function(scope, element, attrs){ 
    console.log("items" + scope.items); 
    scope.openItem = function(){ 
     var ctrl = scope.taskCtrl; 
     ctrl.newTask = false; 
    }; 
} 
}; 
}); 

task.html

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-sm-6"> 
     <entity-task-list items="items"></entity-task-list> 
    </div> 
    <div class="col-sm-6" ng-controller="TaskDetailCtrl as taskDetailCtrl"> 
     <!-- form for adding new task --> 
     <div ng-show="taskCtrl.newTask" ng-include="taskCtrl.templates.new"></div> 
     <!-- container for displaying existing tasks --> 
     <div ng-show="!taskCtrl.newTask" ng-include="taskCtrl.templates.view"></div> 

    </div> 
</div> 
</div> 

Answer 1

Похоже, вы забыли использовать имя контроллера для ссылки на переменную.

Так что в вашей директиве у вас есть:

controller: 'TasksCtrl as taskCtrl' 

Значение это должно быть:

<entity-task-list items="taskCtrl.items"> 

Answer 2

Проблема может быть this. При использовании таких функций, как:

TaskService.loadAllTasks().then(function (data) { 
    this.items = data.tasks; 
}); 

$scope.$on('newTaskAdded', function(event, data){ 
    this.items.concat(data.data); 
}); 

затем this в теле этих функций относится к области функции, а не объему контроллера, поэтому вы устанавливаете свойства на неправильном this объекта.

Чтобы избежать этой проблемы, вы можете сделать одно из следующих действий:

вариант 1:

Использование bind. Например:

TaskService.loadAllTasks().then(function (data) { 
    this.items = data.tasks; 
}.bind(this)); 

$scope.$on('newTaskAdded', function(event, data){ 
    this.items.concat(data.data); 
}.bind(this)); 

вариант 2:

Обычной практикой в ​​угловых контроллеров, чтобы сохранить this в локальной переменной, а затем использовать эту переменную. Пример: