検索

ホームページ  >  に質問  >  本文

angular.js - Angular ディレクティブへのイベントのバインドが有効にならない理由

私は Angular に触れたばかりなので、いくつかの概念がまだ非常に曖昧です。Google でこの質問に対する答えを見つけようとしましたが、適切な答えが見つからなかったので、ここで質問させていただきます。大まかなコードは次のとおりです:

リーリー

ng-repeatを削除するとJSコードの効果が得られますが、ng-repeatを追加すると効果がありません。これはAngularスコープの問題ですか?

过去多啦不再A梦过去多啦不再A梦2862日前547

全員に返信(5)返信します

  • 给我你的怀抱

    给我你的怀抱2017-05-15 17:05:39

    これはスコープとは何の関係もありません。純粋に jquery => angular の典型的なエラー形式です。 jquery => angular的错误表现形式。

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

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

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

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

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

    不用idclass

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

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

    补充:

    关于angular

    AngularJS の命令は、「宣言型」API として、jquery の「命令型」API とは大きく異なります。これらを混合すると間違いが起こりやすくなります。 。

    <オル>

  • 基本的な常識エラーです。id は要素の一意性を示すために使用されますが、それを ng-repeat で使用しました。つまり、複数の要素が存在する可能性があります。 id 要素はすべて need-another-js です。これは jqueryangular とは関係ありません。それは純粋に html 知識の不足です
  • ng-repeat は、angular によって提供されるコマンドとして、angularcompile を通過する必要があります。 >、 リンク プロセス。その結果、$('#need-another-js').click#need-another のイベントを登録します。 -js 要素 この時点では、この要素は実際には angular によって DOM に生成されていません。これが失敗の鍵です。

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

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

    返事
    0
  • 黄舟

    黄舟2017-05-15 17:05:39

    リーリー

    返事
    0
  • 大家讲道理

    大家讲道理2017-05-15 17:05:39

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

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

    リーリー

    返事
    0
  • PHP中文网

    PHP中文网2017-05-15 17:05:39

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

    返事
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-05-15 17:05:39

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

    返事
    0
  • キャンセル返事