Angularjs change view template after link clicked

Question

I am trying to change html template after link is clicked. Value is boolean, initial value is true and appropriate template is loaded, but when value changed to false new template is not loaded, I don't know the reason. When initial value of boolean is true other template is loaded successfully, but on method called not. Please, help. Here is my code:

TaskCtrl

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

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

entityList directive

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

});

directive template

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

Osteoclast

A plunkr link will be helpful for some one to see the demo of the problem. – Kenyon

Answer 1

Without any plunker or JSFiddle I can't tell for sure, but it might be issue with ng-if. I'm thinking of two workarounds.

First that I think is better. Use only 1 ng-include and only change the template.

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

Or if you don't like this solution, try with ng-show instead of ng-if. With ng-show the elements will be rendered with display: none; property when the page loads, while with ng-if they will be rendered when the passed value is true.

Hope this helps you.

Oringas

There is nothing wrong using ng-if and ng-template, unless you are using an old version of Angularjs. Angular team solved this issue since version 1.2. More details here. Here is a Plunker to them working together. This issue seems to be something else. – Moxley