1
이벤트 doubleclick을 실행할 때 텍스트 필드에 포커스를 설정하라는 지시문을 만들었지 만 작동하지 않습니다. 아래의 CSS, HTML 및 JavaScript를 참조하십시오. DOM을 사용하여 텍스트 필드 요소를 가져오고 element.focus()으로 포커스를 설정하려고했지만 작동하지 않습니다.doubleclicking 할 때 텍스트 필드에 포커스 설정
var app=angular.module('todoApp',[])
app.controller('todoListController',function($scope){
$scope.todoList=[
\t {id:1,name:"apprendre angular",completed:false},
\t {id:2,name:"apprendre spring",completed:true}
];
$scope.destroy=function(index){
\t $scope.todoList.splice(index,1);
}
$scope.addTodo=function(){
\t $scope.todoList.push({name:$scope.newtodo,completed:false});
\t $scope.newtodo="";
}
$scope.editTodo=function(todo){
\t todo.edit=false;
}
});
app.directive('todoFocus', function todoFocus($timeout) {
'use strict';
return function (scope, elem, attrs) {
\t scope.$watch(attrs.todoFocus, function (newVal) {
\t if (newVal) {
\t \t $timeout(function() {
\t \t elem[0].focus();
\t \t }, 0, false);
\t }
\t });
};
});html,
body {
\t margin: 0;
\t padding: 0;
}
button {
\t margin: 0;
\t padding: 0;
\t border: 0;
\t background: none;
\t font-size: 100%;
\t vertical-align: baseline;
\t font-family: inherit;
\t font-weight: inherit;
\t color: inherit;
\t -webkit-appearance: none;
\t appearance: none;
\t -webkit-font-smoothing: antialiased;
\t -moz-font-smoothing: antialiased;
\t font-smoothing: antialiased;
}
body {
\t font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
\t line-height: 1.4em;
\t background: #f5f5f5;
\t color: #4d4d4d;
\t min-width: 230px;
\t max-width: 550px;
\t margin: 0 auto;
\t -webkit-font-smoothing: antialiased;
\t -moz-font-smoothing: antialiased;
\t font-smoothing: antialiased;
\t font-weight: 300;
}
button,
input[type="checkbox"] {
\t outline: none;
}
.hidden {
\t display: none;
}
#todoapp {
\t background: #fff;
\t margin: 130px 0 40px 0;
\t position: relative;
\t box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
\t 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
#todoapp input::-webkit-input-placeholder {
\t font-style: italic;
\t font-weight: 300;
\t color: #e6e6e6;
}
#todoapp input::-moz-placeholder {
\t font-style: italic;
\t font-weight: 300;
\t color: #e6e6e6;
}
#todoapp input::input-placeholder {
\t font-style: italic;
\t font-weight: 300;
\t color: #e6e6e6;
}
#todoapp h1 {
\t position: absolute;
\t top: -155px;
\t width: 100%;
\t font-size: 100px;
\t font-weight: 100;
\t text-align: center;
\t color: rgba(175, 47, 47, 0.15);
\t -webkit-text-rendering: optimizeLegibility;
\t -moz-text-rendering: optimizeLegibility;
\t text-rendering: optimizeLegibility;
}
#new-todo,
.edit {
\t position: relative;
\t margin: 0;
\t width: 100%;
\t font-size: 24px;
\t font-family: inherit;
\t font-weight: inherit;
\t line-height: 1.4em;
\t border: 0;
\t outline: none;
\t color: inherit;
\t padding: 6px;
\t border: 1px solid #999;
\t box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
\t box-sizing: border-box;
\t -webkit-font-smoothing: antialiased;
\t -moz-font-smoothing: antialiased;
\t font-smoothing: antialiased;
}
#new-todo {
\t padding: 16px 16px 16px 60px;
\t border: none;
\t background: rgba(0, 0, 0, 0.003);
\t box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
}
#main {
\t position: relative;
\t z-index: 2;
\t border-top: 1px solid #e6e6e6;
}
label[for='toggle-all'] {
\t display: none;
}
#toggle-all {
\t position: absolute;
\t top: -55px;
\t left: -12px;
\t width: 60px;
\t height: 34px;
\t text-align: center;
\t border: none; /* Mobile Safari */
}
#toggle-all:before {
\t content: '❯';
\t font-size: 22px;
\t color: #e6e6e6;
\t padding: 10px 27px 10px 27px;
}
#toggle-all:checked:before {
\t color: #737373;
}
#todo-list {
\t margin: 0;
\t padding: 0;
\t list-style: none;
}
#todo-list li {
\t position: relative;
\t font-size: 24px;
\t border-bottom: 1px solid #ededed;
}
#todo-list li:last-child {
\t border-bottom: none;
}
#todo-list li.editing {
\t border-bottom: none;
\t padding: 0;
}
#todo-list li.editing .edit {
\t display: block;
\t width: 506px;
\t padding: 13px 17px 12px 17px;
\t margin: 0 0 0 43px;
}
#todo-list li.editing .view {
\t display: none;
}
#todo-list li .toggle {
\t text-align: center;
\t width: 40px;
\t /* auto, since non-WebKit browsers doesn't support input styling */
\t height: auto;
\t position: absolute;
\t top: 0;
\t bottom: 0;
\t margin: auto 0;
\t border: none; /* Mobile Safari */
\t -webkit-appearance: none;
\t appearance: none;
}
#todo-list li .toggle:after {
\t content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
}
#todo-list li .toggle:checked:after {
\t content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
}
#todo-list li label {
\t white-space: pre-line;
\t word-break: break-all;
\t padding: 15px 60px 15px 15px;
\t margin-left: 45px;
\t display: block;
\t line-height: 1.2;
\t transition: color 0.4s;
}
#todo-list li.completed label {
\t color: #d9d9d9;
\t text-decoration: line-through;
}
#todo-list li .destroy {
\t display: none;
\t position: absolute;
\t top: 0;
\t right: 10px;
\t bottom: 0;
\t width: 40px;
\t height: 40px;
\t margin: auto 0;
\t font-size: 30px;
\t color: #cc9a9a;
\t margin-bottom: 11px;
\t transition: color 0.2s ease-out;
}
#todo-list li .destroy:hover {
\t color: #af5b5e;
}
#todo-list li .destroy:after {
\t content: '×';
}
#todo-list li:hover .destroy {
\t display: block;
}
#todo-list li .edit {
\t display: none;
}
#todo-list li.editing:last-child {
\t margin-bottom: -1px;
}
#footer {
\t color: #777;
\t padding: 10px 15px;
\t height: 20px;
\t text-align: center;
\t border-top: 1px solid #e6e6e6;
}
#footer:before {
\t content: '';
\t position: absolute;
\t right: 0;
\t bottom: 0;
\t left: 0;
\t height: 50px;
\t overflow: hidden;
\t box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
\t 0 8px 0 -3px #f6f6f6,
\t 0 9px 1px -3px rgba(0, 0, 0, 0.2),
\t 0 16px 0 -6px #f6f6f6,
\t 0 17px 2px -6px rgba(0, 0, 0, 0.2);
}
#todo-count {
\t float: left;
\t text-align: left;
}
#todo-count strong {
\t font-weight: 300;
}
#filters {
\t margin: 0;
\t padding: 0;
\t list-style: none;
\t position: absolute;
\t right: 0;
\t left: 0;
}
#filters li {
\t display: inline;
}
#filters li a {
\t color: inherit;
\t margin: 3px;
\t padding: 3px 7px;
\t text-decoration: none;
\t border: 1px solid transparent;
\t border-radius: 3px;
}
#filters li a.selected,
#filters li a:hover {
\t border-color: rgba(175, 47, 47, 0.1);
}
#filters li a.selected {
\t border-color: rgba(175, 47, 47, 0.2);
}
#clear-completed,
html #clear-completed:active {
\t float: right;
\t position: relative;
\t line-height: 20px;
\t text-decoration: none;
\t cursor: pointer;
\t position: relative;
}
#clear-completed:hover {
\t text-decoration: underline;
}
#info {
\t margin: 65px auto 0;
\t color: #bfbfbf;
\t font-size: 10px;
\t text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
\t text-align: center;
}
#info p {
\t line-height: 1;
}
#info a {
\t color: inherit;
\t text-decoration: none;
\t font-weight: 400;
}
#info a:hover {
\t text-decoration: underline;
}
/*
\t Hack to remove background from Mobile Safari.
\t Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
\t #toggle-all,
\t #todo-list li .toggle {
\t \t background: none;
\t }
\t #todo-list li .toggle {
\t \t height: 40px;
\t }
\t #toggle-all {
\t \t -webkit-transform: rotate(90deg);
\t \t transform: rotate(90deg);
\t \t -webkit-appearance: none;
\t \t appearance: none;
\t }
}
@media (max-width: 430px) {
\t #footer {
\t \t height: 50px;
\t }
\t #filters {
\t \t bottom: 10px;
\t }
}<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="todo.js"></script>
<link href="style.css" rel="stylesheet"/>
<meta charset="utf-8"/>
</head>
<body ng-app="todoApp">
<section id="todoapp" ng-controller="todoListController">
<header id="header">
\t <h1>TodoList</h1>
\t <form action="#" id="todo-form" ng-submit="addTodo()">
\t <input type="text" id="new-todo" placeholder="Ajouter une tâche" ng-model="newtodo" autocomplete="off" >
\t </form>
</header>
<section id="main">
\t <ul id="todo-list">
\t <li ng-repeat="todo in todoList" ng-class="{completed:todo.completed,editing:todo.edit}" ng-dblclick="todo.edit=true">
\t <div class="view">
\t <input type="checkbox" class="toggle" ng-model="todo.completed" />
\t <label> {{todo.name}}</label>
\t <button class="destroy" ng-click="destroy($index)"> </button>
\t </div>
\t <form action="#" >
\t <input class="edit" ng-model="todo.name" ng-blur="editTodo(todo)" todo-focus="todo == true" >
\t </form>
\t </li>
\t </ul>
\t
</section>
</section>
</body>
</html>
대신 scope.todo.xxx를 확인하려고하면 오류가 특성 식에 표시됩니다. 올바른 표현은 todo.edit == true – midy62
예, 문제를 해결하지만 expereion 결과 대신 변수를 보면 더 효율적입니다.보고 있으면 모든 다이제스트주기가 식을 검사한다고 생각합니다. 범위 변수, 트리거는 다른 방식으로 작동하지만, 알다시피, 작동합니다 – Kalamarico