AngularJS의 간단한 지시문 예제에 addEventListener

this 매우 기본적인 지시문 예제가 작동하려고합니다. 조사에 따르면 'elem'은 HTMLHeadingElement (Element에서 상속)의 객체 인 것으로 보입니다. 확실하지 이유 elem.addEventListener 작동하지 않습니다. 또한, elem.bind이 작동하는 것처럼 보이지만, 이것은 global bind이 아닙니다. 맞습니까?AngularJS의 간단한 지시문 예제에 addEventListener

또한 DOM (문서 개체 모델) 레벨 2 HTML 사양과 DOM (문서 개체 모델) 수준 1 사양을 접할 수 있다면 좋을 것입니다. 이것이 처음 DOM 요소에 대한 새로운 Object 계층 구조입니까?

다음은 내 지시의 링크 기능입니다 : -

link: function(scope, elem, attrs) { 
    // elem will be HTMLHeadingElement object! 
    scope.name = 'New Micheal!'; 
    elem.addEventListener('click', function(e) { 
     elem.css('background-color', 'red'); 
    }) 
    /*elem.bind('mouseover', function(e) { 
     elem.css('background-color', 'red'); 
    }); 
    elem.bind('mouseout', function(e) { 
     elem.css('background-color', 'white'); 
    });*/ 
}

출처

2016-06-23 nev.m

elem은 jquery (또는 jqlite) 래핑 된 요소입니다. HTMLHeadingElement의 인스턴스가 아닙니다 (기본 래핑 된 인스턴스에 액세스 할 수는 있지만).

클릭 핸들러를 추가하려면 addEventListener 대신 elem.click(function(e) { ... });을 사용해야합니다.

당신이 적절한 jQuery를 사용하는 경우 위의 방법에만 작동

이 (jqlite되지 않음) 편집. 그러나 일반적으로 JS를 통해 핸들러를 추가하면 안됩니다. 각도 방법은 템플릿에서이 작업을 수행하는 것입니다. 이 같은

뭔가 :

scope.colorHandler = function() { 
    elem.css('background-color', 'red'); 
});

그리고 템플릿에

:이 예에서

template: '<div ng-click="name = \'colorHandler()\'"><h3>Hello {{name}}!!</h3></div>',

의 div 클릭하여 색상 핸들러를 호출합니다.

CSS 클래스와 ng-class의 변경을 통해 CSS 변경 사항을 처리해야하기 때문에 여전히 표준적인 각도는 아닙니다.하지만 점점 더 가까워지고 있으며 요점을 설명하기를 바랍니다.

출처

2016-06-23 03:30:51

(바로 가기 '를 클릭이 있다고 생각하지 마십시오)' jQuery를 사용하지 않는 한 ... jQlite가'bind ('click'')를 사용해야합니다. – charlietfl

jqlite를 사용하고 있습니까? 일반적으로 thoug h, 당신은 일을 각도 방식으로 처리하고 템플릿에서 핸들러를 추가해야합니다. 내 대답을 업데이트 할게. –

호기심에, 경고 (elem)를하면 [[object HTMLDivElement]]가 표시되어 HTMLDivElement를 알게되었습니다. 왜 doesnt 경고 (elem) 사실 jqlite 개체에 대한 힌트를 줘? –

elem 그것이 jQlite 개체 (angular.element) 또는 JQuery와 각도 전에 페이지에 포함 된 경우의 jQuery 객체 인 DOM 요소가 아닙니다. JS

에서 DOM 노드는 elem[0]

jQuery를 방법의 부분 집합 인 angular.element API를 사용할 수 있습니다.

클릭의 경우 리스너는 다음과 같습니다

elem.bind('click',handlerfunc);

이
jQuery를 bind() 글로벌 바인드()

아니 ... 그것은 위에서 API의 일부와 일치하지 않습니다

bind() (더 이상 사용되지 않음 : on()) - 네임 스페이스를 지원하지 않습니다. 선거 또는 이벤트 데이터

출처

2016-06-23 03:29:39 charlietfl

당신은 2 jQlite 및 자바 스크립트 옵션이 있습니다

자바 스크립트 :

elem[0].addEventListener('click', function(e) { 
    elem.css('background-color', 'red'); 
});

jQlite을 :

elem.bind('click', function(e) { 
    elem.css('background-color', 'red'); 
});

출처

2016-06-23 06:12:11

AngularJS의 간단한 지시문 예제에 addEventListener

답변

관련 문제