AngularJS getting data from controller to directive

Question

I am trying do display data retrieved from database in controller to directive. I am using Controller as syntax, but when i try to display my data in directive it is undefined. I am getting right value for name and example variable, but not for items variable.

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 directive

 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>

mindparse · Accepted Answer · 2015-11-25 16:01:50Z

1

Looks like you have forgotten to use the controller name for referencing the variable.

So in your directive you have:

controller: 'TasksCtrl as taskCtrl'

Meaning this should be:

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

edited Nov 25, 2015 at 16:01

answered Nov 25, 2015 at 15:54

mindparse

7,59529 gold badges105 silver badges217 bronze badges

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

Comments

Yaron Schwimmer · Accepted Answer · 2015-11-26 14:49:47Z

The problem might be this. When you use functions like:

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

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

then this in these functions' body refers to the function's scope rather than the controller's scope, so you're setting properties on the wrong this object.

To avoid this problem you can do one of the following:

option 1:

Use bind. For example:

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

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

option 2:

A common practice in Angular controllers is to save this in a local variable, and then use that variable instead. Example:

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

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

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

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

  return $scope.TasksCtrl = this;

}]);

Collectives™ on Stack Overflow

AngularJS getting data from controller to directive

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related