AngularJS 앱의 이벤트 리스너

-1

AngularJS 앱에 이벤트 리스너를 추가하고 싶습니다. 목표는 'ui-list__list-shorten'클래스가있는 앱의 모든 목록을 줄이는 것입니다.AngularJS 앱의 이벤트 리스너

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); }); 
}

출처

2017-12-22 danielle

DOM을 직접 조작하지 마십시오! DOM 요소가 아닌 일반 데이터로 작업해야합니다. –

답변 해 주셔서 감사합니다. 이걸 내가 어떻게 처리해야할지 모르겠다. 내가 어떻게해야하는지 지시 할 수 있니? – danielle

일반적으로 AngularJS 프레임 워크에서 DOM 조작은 핵심 지시문 또는 [사용자 지정 지시문] (https://docs.angularjs.org/guide/directive)을 사용하여 수행됩니다. 지시문 내에서 DOM 조작은 [jqLite] (https://docs.angularjs.org/api/ng/function/angular.element#angularjs-s-jqlite) 메소드를 사용하여 수행됩니다. 이벤트 리스너는 ['elem.on()'] (http://api.jquery.com/on/)과 함께 추가됩니다. – georgeawg

은 이론적으로는 속성을 생성하고이 수에 걸쳐/당신의 HTML DIV에 넣어. out this link for event listeners in angularJs을 확인하십시오. 응용 프로그램의 주요 문제는 HTML을 작성한다는 것입니다. angularJs에서이 작업을 수행하는 방법이 아닙니다. 이동 방법은 templateUrl: 'index.html' 또는 template에 넣고 HTML을 실제 코드에 추가하는 것입니다.

출처

2017-12-22 17:53:25

AngularJS 앱의 이벤트 리스너

답변

관련 문제