リンクをクリックした後にAngularjsがビューテンプレートを変更する

Question

リンクをクリックした後にhtmlテンプレートを変更しようとしています。値はブール値で、初期値はtrueで適切なテンプレートがロードされますが、値がfalseに変更されると新しいテンプレートがロードされませんが、理由はわかりません。ブール値の初期値がtrueの場合、他のテンプレートは正常にロードされますが、notと呼ばれるメソッドにロードされます。助けてください。 は、ここに私のコードです：

<!-- Directive showing list of available tasks --> 
<div class="container-fluid"> 
<div class="row"> 
    <div class="col-sm-6"> 
     <entity-task-list items="taskCtrl.items" openItem="taskCtrl.changeTaskView()"></entity-task-list> 
    </div> 
    <div class="col-sm-6" ng-controller="TaskDetailCtrl as taskDetailCtrl"> 
     <!-- form for adding new task --> 
     <div ng-if="taskCtrl.newTask" ng-include="taskCtrl.templates.new"></div> 
     <!-- container for displaying existing tasks --> 
     <div ng-if="!taskCtrl.newTask" ng-include="taskCtrl.templates.view"></div> 

    </div> 
</div> 

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

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

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

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

    that.changeTaskView = function(){ 
     that.newTask = false; 
     console.log("New task value: " + that.newTask); 
    }; 

    return $scope.TasksCtrl = this; 

}]); 

task.html

TaskCtrl

entityListディレクティブ

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) { 
    } 
}; 

}）;

ディレクティブテンプレート

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

{{}} taskCtrl.newTask

Answer 1

任意のplunkerまたはJSFiddleなしの私は確かに言うことはできませんが、それはng-ifの問題かもしれません。私は2つの回避策を考えています。

まずは良いと思います。 1 ng-includeのみを使用し、テンプレートのみを変更してください。

HTML：

<entity-task-list items="taskCtrl.items" openItem="taskCtrl.changeTaskView('view')"></entity-task-list> 
... 
<div ng-include="taskCtrl.currentTemplate"></div> 

JS：

that.currentTemplate = that.templates.new; 
... 
that.changeTaskView = function(template) { 
    that.currentTemplate = that.templates[template]; 
}; 

それとも、このソリューションを好きではない場合、ng-showの代わりng-ifてみてください。 ng-showを指定すると、ページが読み込まれるときに要素はdisplay: none;プロパティでレンダリングされ、の場合は、渡された値がtrueのときにレンダリングされます。

希望すると、これが役立ちます。