AngularJS从控制器获取数据到指令

Question

我正在尝试显示从控制器中的数据库检索到的数据到指令。我使用Controller作为语法，但是当我尝试在指令中显示我的数据时，它是未定义的。我为名称和示例变量获得正确的值，但不是用于项目变量。

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在一个局部变量，然后使用该变量代替。例如：

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; 

}]);