Ich arbeite an einer Ajax-App mit jQuery und AngularJS.

Wenn ich den Inhalt (der AngularJS-Bindungen enthält) eines Divs mit jQuery's aktualisierehtml Funktion funktioniert die AngularJS-Bindung nicht.

Das Folgende ist der Code dessen, was ich versuche zu tun:

$(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>

Ich habe dynamischen Inhalt in einem Div mit der ID#dynamicContent, und ich habe eine Aktualisierungsschaltfläche, die den Inhalt dieses Div aktualisiert, wenn auf Aktualisieren geklickt wird. Das Inkrementieren funktioniert wie erwartet, wenn ich den Inhalt nicht aktualisiere. Nach dem Aktualisieren funktioniert die AngularJS-Bindung jedoch nicht mehr.

Dies ist in AngularJS möglicherweise nicht gültig, aber ich habe zunächst eine Anwendung mit jQuery erstellt und später damit begonnen, AngularJS zu verwenden, damit ich nicht alles nach AngularJS migrieren kann. Jede Hilfe, um dies in AngularJS zum Laufen zu bringen, wird sehr geschätzt.