angle.js - Angular 지시문에 이벤트 바인딩이 적용되지 않는 이유

Question

Angular를 접한 지 얼마 되지 않아 아직 개념이 매우 모호한 부분이 있어서 구글을 통해 이 질문에 대한 답을 찾아보았지만 마땅한 답을 찾지 못해 여기에 여쭤보고 싶습니다. 대략적인 코드입니다:

으아악

ng-repeat을 제거하면 JS 코드의 효과를 얻을 수 있는데 ng-repeat를 추가하면 효과가 나타나지 않습니다. Angular 범위 문제 때문인가요?

Answer 1

이것은 범위와 관련이 없으며 순전히 jquery => angular의 일반적인 오류 형식입니다. jquery => angular的错误表现形式。

AngularJS的指令，作为一种“声明式”的API，玩法和jquery那套“命令式”API有很大区别，你在混着用的时候，很容易出错。

1. 基本常识错误，id是用来表示元素唯一性的，可你用在了ng-repeat上，也就是说可能出现若干个元素的id都是need-another-js，这和jquery、angular都没关系，纯粹是html知识上的缺失

2. ng-repeat作为angular提供的指令，需要经过angular的compile、linking过程，导致，当你的$('#need-another-js').click在为#need-another-js元素注册事件的时候，这个元素其实还没有被angular生成到DOM中，这才是没生效的关键。

单就你这个例子来讲，可以做如下修改使之生效：

<p ng-repeat="item in list" class="need-another-js"></p>

不用id用class

<script>
    $(document).on('click', '.need-another-js', function(){
        // do something
    });
</script>

虽然我不推荐这种写法，但你既然选择了"命令式"和声明式API混用，想必有你的理由。

补充：

关于angular

AngularJS의 지침은 "선언적" API로서 jquery의 "명령형" API와 매우 다릅니다. 이를 혼합하면 실수하기 쉽습니다. .

기본 상식 오류, id는 요소의 고유성을 나타내는 데 사용되지만 ng-repeat에 사용했기 때문에 여러 개가 있을 수 있습니다. id는 모두 need-another-js입니다. 이는 jquery 또는 angular와 관련이 없습니다. 순전히 html지식 부족

입니다

ng-repeat는 angular에서 제공하는 명령으로 angular의 컴파일을 거쳐야 합니다. 및 연결 프로세스로 인해 $('#need-another-js').click이 #need-another-에 대한 이벤트를 등록할 때 발생합니다. js 요소 당시 이 요소는 angular에 의해 DOM에 실제로 생성되지 않았습니다. 이것이 실패의 핵심입니다.

귀하의 예를 들어 다음과 같이 수정하면 효과적입니다.

으아악

🎜class 대신 id를 사용하세요🎜

으아악 🎜이러한 작성 방식을 권장하지는 않지만 "명령형" API와 선언적 API를 혼합하기로 선택하셨으므로 이유가 있을 것입니다. 🎜 🎜추가됨: 🎜 🎜 angular의 작동 방식과 관련하여 공식 웹사이트에서 다음 소개를 읽으면 이제 막 시작한 학생들에게 도움이 될 것 같습니다. 🎜 🎜🎜🎜🎜🎜 🎜문서 주소: Concepts🎜

Answer 2

으아악

Answer 3

angular에는 ng-click을 지원하는 바인딩 이벤트가 있습니다

이렇게 써보시면 됩니다

으아악

Answer 4

Angular를 배울 때 jq에서 angle로 바로 전환했습니다. Angular는 jq가 할 수 있는 모든 것을 할 수 있습니다

Answer 5

ng-repeat는 dom 요소를 동적으로 추가하는 것입니다. click 메서드를 사용하여 동적으로 추가된 요소에 이벤트를 바인딩하면 트리거되지 않습니다. Jquery를 사용하고 싶다면 leftstick에서 제안한 방법을 사용하지만 mumofa에서 제안한 각도 방법을 사용하는 것이 좋습니다