Angularjs bağlantı tıklandıktan sonra görünüm şablonunu değiştir

Question

Bağlantı tıklandıktan sonra html şablonunu değiştirmeye çalışıyorum. Değer booledir, başlangıç ​​değeri doğrudur ve uygun şablon yüklenir, ancak değer yanlış olarak değiştirildiğinde yeni şablon yüklenmez, nedenini bilmiyorum. Boolean'ın başlangıç ​​değeri true olduğunda, diğer şablon başarıyla yüklenir, ancak yöntem çağrılmadı. Lütfen yardım et. İşte benim kodudur:

<!-- 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 direktifi

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

});

direktif şablon

<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}} herhangi plunker veya JSFiddle Emin söyleyemem ama ng-if ile sorun olabilir olmadan

Answer 1

. İki geçici çözüm düşünüyorum.

İlk önce bence daha iyi. Sadece 1 ng-include kullanın ve sadece şablonu değiştirin.

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]; 
}; 

Yoksa bu çözüm beğenmezseniz, ng-show yerine ng-if ile deneyin. ng-show ile, öğeler sayfa yüklenirken display: none; özelliği ile işlenecek, ng-if ise geçirilen değer true olduğunda işlenecektir.

Bu yardımcı olur umarım.