angular.js - 为什么给 Angular 指令绑定事件无法生效

Question

因为刚刚接触 Angular，所以有些概念还很模糊，对于这个问题尝试通过 Google 查找答案，但并未找到合适的解答，所以想在这里请教一下各位，这里是一个大概的代码：

<p ng-repeat="item in list" class="need-another-js"></p>
<script>
    $('.need-another-js').click(function(){
        // do something
    })
</script>

如果把 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 の compile を通過する必要があります。 >、 リンク プロセス。その結果、$('#need-another-js').click が #need-another のイベントを登録します。 -js 要素 この時点では、この要素は実際には angular によって DOM に生成されていません。これが失敗の鍵です。

あなたの例として、次の変更を加えて効果的にすることができます:

リーリー

🎜class の代わりに id を使用してください🎜

リーリー 🎜この書き方はお勧めしませんが、「命令型」API と 宣言型 API を混合することを選択したのですから、それなりの理由があるはずです。 🎜 🎜追加: 🎜 🎜 angular がどのように機能するかについては、公式 Web サイトにあるこの概要を読むことが、始めたばかりの学生にとって役立つと思います: 🎜 🎜🎜🎜🎜🎜 🎜文書アドレス: 概念🎜

Answer 2

リーリー

Answer 3

angular には ng-click をサポートするバインディング イベントがあります

こんな風に書いてみてもいいですよ

リーリー

Answer 4

Angular を学んだとき、JQ から Angular に直接切り替えました。JQ でできることはすべて Angular でできます

Answer 5

ng-repeat は DOM 要素を動的に追加するためのもので、動的に追加された要素に click メソッドを使用してイベントをバインドした場合、イベントはトリガーされません。 jqueryを使いたい場合は、leftstickが提案する方法を使用しますが、mumofaが提案するangularメソッドを使用することをお勧めします