AngularJS + JQuery：如何在angularjs中使用动态内容

Question

AngularJS + JQuery：如何在angularjs中使用动态内容

我正在使用jQuery和AngularJS开发Ajax应用程序。

当我使用jQuery的html函数更新div的内容（包含AngularJS绑定）时，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的div中有动态内容#dynamicContent，并且我有一个刷新按钮，可以在单击刷新时更新此div的内容。如果我不刷新内容，增量将按预期工作，但在刷新后，AngularJS绑定将停止工作。

这可能在AngularJS中无效，但我最初使用jQuery构建应用程序并稍后开始使用AngularJS，因此我无法将所有内容迁移到AngularJS。任何有关在AngularJS中工作的帮助都非常感谢。

Answer 1

因为angular.element(document).injector()给出了错误injector is not defined 所以，我创建了一个可以在AJAX调用之后运行的函数或者使用jQuery更改DOM的函数。  function compileAngularElement( elSelector) {         var elSelector = (typeof elSelector == 'string') ? elSelector : null ;               // The new element to be added         if (elSelector != null ) {             var $div = $( elSelector );                 // The parent of the new element                 var $target = $("[ng-app]");               angular.element($target).injector().invoke(['$compile', function ($compile) {                         var $scope = angular.element($target).scope();                         $compile($div)($scope);                         // Finally, refresh the watch expressions in the new element                         $scope.$apply();                     }]);             }         }通过传递新元素的选择器来使用它。像这样compileAngularElement( '.user' ) ;