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这些功能＆＃39; body指的是函数的作用域而不是控制器的作用域，因此您需要在错误的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：

Angular控制器中的一种常见做法是将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;

}]);

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

2 个答案: