Pracuję nad aplikacją Ajax, używając zarówno jQuery, jak i AngularJS.
Kiedy aktualizuję zawartość (która zawiera powiązania AngularJS) elementu div przy użyciu html
funkcji jQuery , powiązania AngularJS nie działają.
Poniżej znajduje się kod tego, co próbuję zrobić:
$(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>
Mam dynamiczną zawartość wewnątrz elementu div z identyfikatorem #dynamicContent
i mam przycisk odświeżania, który aktualizowałby zawartość tego elementu div po kliknięciu odświeżania. Przyrost działa zgodnie z oczekiwaniami, jeśli nie odświeżę zawartości, ale po odświeżeniu wiązanie AngularJS przestaje działać.
Może to nie być poprawne w AngularJS, ale początkowo zbudowałem aplikację w jQuery, a później zacząłem używać AngularJS, więc nie mogę przenieść wszystkiego do AngularJS. Każda pomoc w uruchomieniu tego narzędzia w AngularJS jest bardzo mile widziana.