Угловое JS свойство изменения контроллера для директивы

Question

Я пытаюсь изменить логическое свойство моего контроллера из директивы. Он установлен в true, но когда я устанавливаю его в false, он должен отображать другой шаблон html. Ее мой код:

Директива код:

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

TaskCtrl код:

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

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

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

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

    return $scope.TasksCtrl = this; 

}]); 

taskList.html

<ul class="list-group"> 
<li ng-repeat="item in taskCtrl.taskItems" 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> 

и task.html

<!-- Directive showing list of available tasks --> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-sm-6"> 
      <entity-task-list task-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

Если изменить это:

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

Для этого (в буквальном смысле):

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

ваш код будет работать, это связано с Вами с помощью синтаксиса controllerAs для TaskCtrl, но не назначая его на это вместо в $ scope