1
イベントdoubleclickを実行するときにテキストフィールドにフォーカスを設定する指示を作成しますが、動作しません。以下のCSS、HTML、JavaScriptをご覧ください。 私はDOMを使ってテキストフィールド要素を取得し、element.focus()でフォーカスを設定しようとしましたが、動作しません。ダブルクリックするとテキストフィールドにフォーカスが設定される
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>
はい、エラーは属性式にあります。正しい式はtodo.edit == trueです。 – midy62
はい、それは問題を解決しますが、expresionの結果ではなく変数を見ると効率的です。見れば、すべてのダイジェストサイクルが式をチェックすると思いますスコープ変数、トリガーは異なる方法で動作しますが、ご覧のとおり、動作します – Kalamarico