AngularJS implémente l'exemple d'événement ng-keyup pour un DOM augmenté dynamiquement

Cet article présente principalement l'exemple d'AngularJS implémentant l'événement ng-keyup pour le DOM ajouté dynamiquement. Maintenant, je le partage avec vous et le donne comme référence.

Nous voyons souvent cette forme de contenu sur les pages Web, comme le montre l'image :

Cliquez avec la souris et cela deviendra un input , comme le montre la figure :

Si aucun contenu n'est saisi et que la souris quitte, elle reprend son apparence d'origine si du contenu est saisi, le contenu reste inchangé même si ; la souris quitte Si vous appuyez sur Entrée, le contenu sera ajouté et la zone de saisie sera effacée.

Je pense que c'est ainsi que cela est réalisé ? Après y avoir réfléchi un moment, j'ai eu cette idée : dans des circonstances normales, c'est un élément p ou p Après avoir cliqué, il devient un élément input, et lorsque la souris s'en va, il change. retour à l'élément d'origine. Le code ( incluant la version annotée détaillée ) est le suivant :

window.onload = function () {
  // 页面加载完给id为click-to-add的元素增加onclick方法
  document.getElementById("click-to-add").onclick = function () {
    // this在这个函数中就是id为click-to-add的元素，将其保存到变量non_input_type
    var non_input_type = this;
    // 新建一个input，保存到变量input_type
    var input_type = document.createElement("input");
    // 给input添加class和placeholder，这里我发现class对bootstrap有效
    input_type.setAttribute("placeholder", "添加待办事项");
    input_type.className = "form-control";
    // 获取父元素，然后父元素替换Child
    this.parentNode.replaceChild(input_type, non_input_type);
    // 设置焦点到input框中
    input_type.focus();
    // 当input失去焦点，即鼠标点到了别的地方
    input_type.onblur = function () {
    // 且input中没有输入内容时
    if (input_type.value.length === 0){
      // 再替换回原来的对象
      input_type.parentNode.replaceChild(non_input_type, input_type);
      }
    }
  }
};

Le html code correspondant est très simple :

  <p>
    <p id="click-to-add">
      <span>+</span>
      <span>添加待办事项</span>
    </p>
  </p>

Alors, comment input réagit-il au retour chariot ? htmlLe onkeyup intégré peut être facilement réalisé. Je ne le démontrerai pas ici. Vous pouvez le rechercher vous-même. Dans Angular, vous pouvez ajouter input à ng-keyup pour y parvenir. C'est à l'origine très simple, mais dans le problème actuel, input n'est pas là depuis le début, mais nouvellement généré, directement en utilisant ng-keyup. ne fonctionne pas. Angular n'écoutera la méthode ng que lorsque la page est chargée, et la nouvelle sera invalide. Pour que le nouveau DOM réponde également à la méthode Angular, vous devez le faire. utilise la méthode $compile et ajoute les deux lignes suivantes avant le code précédent this.parentNode.replaceChild(input_type, non_input_type); :

// 增加ng-keyup事件，对应执行send($event)这个函数
input_type.setAttribute("ng-keyup", "send($event)");
// 对input_type使用$compile方法
$compile(input_type)($scope);

L'étape suivante consiste à écrire send La méthode est la suivante :

$scope.send = function (e) {
  // 不同浏览器获取按键代码不一样，有的是e.keyCode，有的是e.which
  var keycode = window.event?e.keyCode:e.which;
  // 回车对应13
  if (keycode === 13){
    // e.targe就是对应的DOM，这里获取到value就按自己的需求去处理了
    alert("Add ToDo: " + e.target.value);
    e.target.value = "";
  }
}

La démonstration est la suivante, dans des circonstances normales c'est comme ça :

Après avoir cliqué, cela devient une zone de saisie :

Quand il y a du contenu, le focus ne changera pas s'il n'y a pas de contenu. contenu, il reviendra à l'état normal. Lorsque vous appuyez sur Entrée, puis alertContenu :

Ensuite, j'y ai repensé et j'ai décidé d'utiliser simplement input et modifier la couleur de placeholder...

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Deux façons pour l'application Vue d'une seule page de référencer des fichiers de style distincts

service partagé angulaire4 dans Exemples de communication de données dans plusieurs composants

Basé sur le stockage de paires clé-valeur en js et l'introduction de précautions

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!