所以我一直試圖通過雙擊它來改變播放列表的標題。當我失去焦點時，ng-blur沒有被觸發

我正在使用ng-blur來知道我何時失去了編輯的重點，但doneEditing函數從未被調用過。（editTitle並完成編輯，只需將playlist.editing設置爲true和false以及console.log編輯並完成編輯）。

的.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; 
    }; 

}

我不知道我做錯了什麼在這裏，因爲例子，我對小提琴發現（http://jsfiddle.net/davekr/F7K63/43/）工作正常使用這些線。 PS：我已經測試過在Firefox和Chrome上運行代碼，doneEditing函數從未被調用過。

編輯：上傳完整的.html和.js文件

來源

2016-03-27 Guillaume Roche-Bayard

更多的JavaScript代碼，請 – amanuel2

上傳的.js文件的一部分，是否足夠呢？ –

請輸入完整的JS代碼 – amanuel2

您需要添加ng-model="playlist.title"到輸入標籤

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

如果你添加console.log("foo");到doneEditing功能，你可以看到，它是正常工作

編輯

這裏是一個plunker https://plnkr.co/edit/LoW9nkhYO5BIaOzuaxOX?p=preview個

更新AngularJS到最新版本，或者至少1.2 <

來源

2016-03-27 00:43:05 Konkko

對不起，我的.html還沒有及時更新，ng模型沒有修復它（我已經試過了！） –

編輯答案檢查鏈接 – Konkko

@ GuillaumeRoche-Bayard更新你的角度爲1.4 < – Konkko

當我失去焦點時，ng-blur沒有被觸發

回答

編輯

相關問題