BinaryDevelop
  1. ホーム
  2. jquery

[解決済み] AngularJS + JQuery : Angularjsで動的コンテンツを動作させる方法

2023-07-03 11:24:32

質問

jQueryとAngularJSの両方を使用したAjaxアプリに取り組んでいます。

divのコンテンツ（AngularJSのバインディングを含む）をjQueryの html 関数で更新すると、AngularJSのバインディングが動作しません。

以下は、私がやろうとしていることのコードです。 

$(document).ready(function() {
  $("#refreshButton").click(function() {
    $("#dynamicContent").html("<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>")
  });
});

</style><script src="http://docs.angularjs.org/angular-1.0.1.min.js"></script><style>.ng-invalid {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
  <div id='dynamicContent'>
    <button ng-click="count = count + 1" ng-init="count=0">
        Increment
      </button>
    <span>count: {{count}} </span>
  </div>


  <button id='refreshButton'>
    Refresh
  </button>
</div>

IDが #dynamicContent で、リフレッシュボタンがあり、リフレッシュがクリックされるとこの div のコンテンツが更新されます。コンテンツを更新しない場合、インクリメントは期待通りに動作しますが、更新した後、AngularJSバインディングは動作しなくなります。

これはAngularJSでは有効ではないかもしれませんが、私は最初にjQueryでアプリケーションを構築し、後でAngularJSを使い始めたので、私はすべてをAngularJSに移行することができません。AngularJSでこれを動作させるための任意のヘルプは非常に感謝されます。

どのように解決するのですか？

まず $compile を呼び出す必要があります。

あなたのフィドルでは、次のように表示されます。 

$("#dynamicContent").html(
  $compile(
    "<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>"
  )(scope)
);

明らかに $compile がコントローラにインジェクトされている必要があります。

詳しくは $compile ドキュメント .

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します