AngularJS + JQuery :Как заставить динамический контент работать в angularjs

Я работаю над приложением Ajax, используя как jQuery, так и AngularJS.

Когда я обновляю содержимое (, которое содержит привязки AngularJS )элемента div с помощью функции 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>

У меня есть динамический контент внутри div с идентификатором #dynamicContent, и у меня есть кнопка обновления, которая будет обновлять содержимое этого div при нажатии кнопки обновления. Инкремент работает, как и ожидалось, если я не обновляю содержимое, но после обновления привязка AngularJS перестает работать.

Это может быть недопустимо в AngularJS, но я изначально создавал приложение с jQuery и позже начал использовать AngularJS, поэтому я не могу перенести все на AngularJS. Любая помощь в том, чтобы заставить это работать в AngularJS, очень ценится.

82
задан Prashant Pokhriyal 23 February 2017 в 10:45
поделиться