当我失去焦点时,不会触发ng模糊
ng-blur is not triggered when I lose focus
所以我一直试图通过双击来更改播放列表的标题。
我使用ng blur来知道何时我在编辑上失去了焦点,但doneEditing函数从未被调用。(editTitle和done editing只需将playlist.editing设置为true和false,console.log编辑和done编辑)。
.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/)使用这些线路运行良好。
附言:我已经测试过在Firefox和Chrome上运行代码,doneEditing函数从未被调用过。
编辑:上传了完整的.html和.js文件
您需要将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
函数中,你可以看到它在中正常工作
编辑
这是一个plunkerhttps://plnkr.co/edit/LoW9nkhYO5BIaOzuaxOX?p=preview
将AngularJS更新到最新版本或至少1.2<
相关文章:
- 模糊事件的Javascript测试
- ng映射方向备选方案
- AngularJS UI路由器不能像ng路由器那样工作
- 角度:在ng重复上切换图像
- 正在使用$location.path(.)路由ng视图
- AngularJS:ng之后,重复$scope值未按预期更新
- ng打开空字符串
- 我应该使用Ng提交还是点击表格
- ng init中的表达式无法使用ng repeat
- ng更改事件不适用于Dropdown
- 将事件聚焦/模糊在可编辑内容的元素上
- 当表单字段为空时,angularjs ng模糊
- 当我失去焦点时,不会触发ng模糊
- 在 ng 重复中进行内联编辑时,输入字段会模糊
- 在 ng 模糊上应用延迟
- 角度-iPhone/iPad上的ng模糊问题
- 使用手势服务时,角度指令未触发ng模糊
- ng模糊don't在firefox上用输入数字触发事件
- AngularJS:为ng重复中的最后一个元素添加ng模糊事件
- 使用ng模糊的输入验证(如果输入错误,请更改背景颜色)