Strange behavior concerning the sample ToDo app in the docs


#1

Hi all. I’m new to the Ionic framework (and web development in general) and was trying to follow through the Ionic ToDo app demonstration. Before starting I want to mention I manually installed the latest ionic release from its GitHub page and included the following in my index.html: ionic.bundle.js, angular.min.js, angular-animate.min.js, angular-resource.min.js, angular-sanitize.min.js, angular-ui-router.min.js. In chapter 5, the author details the controller code to create a new task. I tried adding some extra functionality to the .createTask()method defined as

$scope.createTask = function(task) {
$scope.tasks.push({
  title: task.title
});
$scope.taskModal.hide();
task.title = "";
};

by changing it to

$scope.createTask = function(task) {
  if (task.title == "") {
      window.alert("Empty Task!");
      $scope.taskModal.hide();
  }  else {
      $scope.tasks.push({title: task.title})
      $scope.taskModal.hide();
      task.title = "" ;
  };
};

Now, if you run this new code with the accompanying view outlined in the tutorial, you will see that the controller calls the empty task alert even if task.title == "" fails! Maybe I’m missing something really obvious, but I’m not sure. Furthermore, and the main reason I’m writing this post, if you simply comment out the line task.title = ""; in the else clause and add a task via the live view, it adds two instances of the task created! This is bizarre, or so I thought, as it seems like $scope.tasks.push({title: task.title}); is being executed twice. So just like any good programmer would do, I tried to make the compiler (in this case interpreter) spill its secrets. I declared a variable in the controller scope, $scope.i = 0, to keep track of what was happening. Leaving //task.title = "" in its place, I inserted

$scope.i += 1;
window.alert($scope.i);

right before it. When you run this code, you will notice two things:

  1. The controller no longer calls the empty task alert on non-empty tasks.
  2. The view is now updated with only one instance of the created task.

So, I’m not really sure what’s happening. Maybe it’s just some careless error I’ve overlooked, but any help on this will be really appreciated. Many thanks!