Question

我想为AngularJS应用添加一个事件监听器。目标是缩短应用中具有类＆u-list__list的所有列表 - 缩短＆＃39;。

我不确定AngularJS中关于事件监听器的这种使用的最佳实践是什么，所以我想了解一些提示。

我在哪里可以在AngularJS（1）应用程序中实现它？

提前致谢！

代码示例：

var listUl = document.querySelectorAll('.ui-list__list--shorten');

// Add / Remove class 'list--shortened'
function listClass(list) {
  if (list.classList.contains("ui-list__list--shortened")) {
    list.classList.remove("ui-list__list--shortened");
  } else {
    list.classList.add("ui-list__list--shortened");
  }
}

// Shorten list & add show all button
function listShorten(list) {
  // Shorten the list
  listClass(list);

  // Creating elements
  var div = document.createElement("div");
  var span = document.createElement("span");
  var spanContent = document.createTextNode("Show all");

  // Adding classes
  span.classList.add("ui-list__button", "ui-list__button--closed");
  div.classList.add("ui-list__hide-overflow");

  span.appendChild(spanContent);
  div.appendChild(span);

  // Add after the list
  function insertAfter(list, div) {
    list.parentNode.insertBefore(div, list.nextSibling);
  }
  insertAfter(list, div);
}

// .ui-list__list longer than 100 px will be collapsed 
for (var i = 0; i < listUl.length; i++) {
  if (listUl[i].offsetHeight > 100) {
    listShorten(listUl[i]);
  }
}

// Change button when clicked
var listButton = document.querySelectorAll('.ui-list__button');

function changeButton(e) {
  if (e.classList.contains("ui-list__button--closed")) {
    e.innerHTML = "Show less";
    e.classList.remove("ui-list__button--closed");
    e.classList.add("ui-list__button--open");
  } else if (e.classList.contains("ui-list__button--open")) {
    e.innerHTML = "Show all";
    e.classList.remove("ui-list__button--open");
    e.classList.add("ui-list__button--closed");
  }
}

// Event listener for each button
for (i = 0; i < listButton.length; i++) {
  listButton[i].addEventListener("click", function () { listClass(this.parentNode.previousSibling); changeButton(this); });
}

Answer 1

理论上你创建一个属性并将它放在你的html div / span上。检查out this link for event listeners in angularJs。您的应用程序的主要问题是您正在编写HTML在angularJs中，这不是如何做到的。解决方法是将其放在templateUrl: 'index.html'或template中，然后您可以在实际代码中添加HTML

AngularJS app中的事件监听器

1 个答案: