AngularJS + JQuery :如何让动态内容在angularjs中工作

Question

我正在开发一个同时使用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为#dynamicContent的div中有动态内容，并且我有一个刷新按钮，当单击刷新时，它会更新这个div的内容。如果我不刷新内容，增量就会按预期工作，但是在刷新之后，AngularJS绑定就停止工作了。

这在AngularJS中可能无效，但我最初使用jQuery构建应用程序，后来开始使用AngularJS，因此我不能将所有内容都迁移到AngularJS。对于在AngularJS中实现这一功能的任何帮助，我们都非常感谢。

Answer 1

在将HTML字符串插入到DOM之前，需要对其调用$compile，以便angular有机会执行绑定。

在你的小提琴里，它看起来像这样。

$("#dynamicContent").html(
  $compile(
    "<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>"
  )(scope)
);

显然，必须将$compile注入到您的控制器中，这样才能正常工作。

在$compile documentation中阅读更多内容。

Answer 2

在您无法控制动态内容的情况下使用另一种解决方案

如果你没有通过一个指令来加载你的元素，这是可行的。如注释jsfiddles中的示例所示)。

总结您的Content

将内容包装在div中，以便在使用JQuery时可以选择它。你也可以选择使用原生javascript来获取你的元素。

<div class="selector">
    <grid-filter columnname="LastNameFirstName" gridname="HomeGrid"></grid-filter>
</div>

使用Angular Injector

如果您没有$compile的引用，可以使用以下代码来获取它的引用。

$(".selector").each(function () {
    var content = $(this);
    angular.element(document).injector().invoke(function($compile) {
        var scope = angular.element(content).scope();
        $compile(content)(scope);
    });
});

摘要

最初的帖子似乎假设你手头有一个$compile参考资料。当你有参考资料时，这显然是很容易的，但我没有，所以这是我的答案。

对前面的代码的一个警告

如果你正在使用一个带有minify方案的asp.net/mvc捆绑包，当你在发布模式下部署时，你会遇到麻烦。问题以未捕获的错误：$injector:unpr的形式出现，这是由minifier扰乱angular javascript代码引起的。

这里是补救它的方法：

用下面的重载替换前面的代码段。

...
angular.element(document).injector().invoke(
[
    "$compile", function($compile) {
        var scope = angular.element(content).scope();
        $compile(content)(scope);
    }
]);
...

在我把它拼凑起来之前，这给我造成了很大的痛苦。

Answer 3

对@jwize答案的补充

因为angular.element(document).injector()给出了错误injector is not defined So，所以我创建了一个函数，您可以在调用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' ) ;