ng-blur is not triggered when I lose focus

Question

So i've been trying to be able to change the title of a playlist by double clicking on it.

I'm using ng-blur to know when i lose focus on the edit, but the doneEditing function is never called. (editTitle and done editing just set playlist.editing to true and false and console.log editing and done editing).

.html

<html>
  <head>
    <meta charset="UTF-8">
    <title>Playlist</title>

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">    

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  </head>

  <body>
    <article ng-app>
      <div class="todo-wrapper" ng-controller="TodoCtrl">
        <h2 ng-hide="playlist.editing" ng-dblclick="editTitle(playlist)">{{playlist.title}}</h2> 
        <input ng-show="playlist.editing" ng-model="playlist.title" ng-blur="doneEditing(playlist)" autofocus />
        <ul>
          <li ng-repeat="todo in todos">
            <input type="checkbox" ng-model="todo.done"/>
            <span class="done-{{todo.done}}">{{todo.text}}</span>
          </li>
        </ul>
        <form>
          <input class="add-input" placeholder="I need to..." type="text" ng-model="formTodoText" />
          <button class="add-btn" ng-click="addTodo()"><h2>Add</h2></button>
        </form>
        <button class="clear-btn" ng-click="clearCompleted()">Clear completed</button>
      </div>
    </article>
  <script src="js/index.js"></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>
  </body>
</html>

.js

function TodoCtrl($scope) {

  $scope.todos = [
    {text:'Movie1', done:false},         
    {text:'Movie2', done:false}
  ];
  $scope.playlist = {title: "New Playlist", editing:false};

  $scope.getTotalTodos = function () {
    return $scope.todos.length;
  }; 

  $scope.addTodo = function () {
    $scope.todos.push({text:$scope.formTodoText, done:false});
    $scope.formTodoText = '';
  };

  $scope.clearCompleted = function () {
        $scope.todos = _.filter($scope.todos, function(todo){
            return !todo.done;
        });
  };

  $scope.editTitle = function (playlist) {
      playlist.editing = true;
  };

  $scope.doneEditing = function (playlist) {
      playlist.editing = false;
  };

}

I'm not sure what i'm doing wrong here, because the examples I've found on fiddle ( http://jsfiddle.net/davekr/F7K63/43/ ) are working fine using those lines.

PS : I've tested to run the code on both Firefox and Chrome, the doneEditing function has never been called.

Edit : Uploaded the full .html and .js files

Answer 1

You need to add ng-model="playlist.title" to the input tag

<h2 ng-hide="playlist.editing" ng-click="editTitle(playlist)">{{playlist.title}}</h2> 
<input ng-show="playlist.editing" ng-model="playlist.title" ng-blur="doneEditing(playlist)" autofocus />

And if you add console.log("foo"); to the doneEditing function you can see that it is working correctly

EDIT

Here is a plunker https://plnkr.co/edit/LoW9nkhYO5BIaOzuaxOX?p=preview

Update AngularJS to newest version or at least 1.2 <

ng-blur is not triggered when I lose focus

Question

1 answers

solution1
0 ACCPTED 2016-03-27 00:43:05

EDIT

ng-blur is not triggered when I lose focus

Question

1 answers

solution1 0 ACCPTED 2016-03-27 00:43:05

EDIT

solution1
0 ACCPTED 2016-03-27 00:43:05