AngularJS + JQuery: Jak uzyskać dynamiczną pracę z angularjs
Pracuję nad aplikacją Ajax przy użyciu zarówno jQuery, jak i AngularJS.
Kiedy aktualizuję zawartość (która zawiera powiązania AngularJS) div używając jQuery'shtml
funkcja, powiązania AngularJS nie działają.
Oto 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 div z identyfikatorem#dynamicContent
i mam przycisk odświeżania, który aktualizuje zawartość tego div po kliknięciu odświeżania. Przyrost nie działa zgodnie z oczekiwaniami, jeśli nie odświeżam zawartości, ale po odświeżeniu powiązanie AngularJS przestaje działać.
Może to nie być poprawne w AngularJS, ale początkowo zbudowałem aplikację z jQuery i zacząłem używać AngularJS później, więc nie mogę przenieść wszystkiego do AngularJS. Każda pomoc w uzyskaniu tego w AngularJS jest bardzo mile widziana.