イベントリスナAngularJSアプリ

Question

に私は私のAngularJSアプリにイベントリスナーを追加します。 目標は、クラス「 - 短縮UI-list__list」を持っているアプリで任意のリストを短縮することです。

は、私はそれについていくつかのヒントをしたいと思いますので、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 /スパンの上に置きます。チェックout this link for event listeners in angularJs。あなたのアプリケーションの主な問題は、あなたがHTMLを書いていることです。angularJsでは、これを行う方法ではありません。 これを行う方法は、templateUrl: 'index.html'に入れるか、またはtemplateに入れて、実際のコードにHTMLを追加することができます。