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

Question 1

我正在使用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中实现此功能的任何帮助。

Question 2

您需要$compile先将HTML字符串插入HTML，然后再将其插入DOM中，以便angular有机会执行绑定。

在您的小提琴中，它看起来像这样。

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

显然，$compile必须将其注入控制器才能正常工作。

在$compile文档中阅读更多内容。

Question 3

万一您无法控制动态内容，另一种解决方案

如果您未通过指令加载元素（例如，在带注释的jsfiddles中的示例中），则此方法有效。

整理您的内容

将内容包装在div中，以便在使用JQuery时可以选择它。您还可以选择使用本机JavaScript来获取元素。

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

使用角度喷射器

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

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

概要

最初的帖子似乎假设您有$ compile参考资料。当您拥有参考文献时，这显然很容易，但是我没有，所以这就是我的答案。

先前代码的一个警告

如果在最小化方案中使用asp.net/mvc捆绑软件，则在以发布模式进行部署时会遇到麻烦。麻烦来自未捕获错误：[$ injector：unpr]的形式，这是由缩小程序与有角度的javascript代码弄乱引起的。

这是补救方法：

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

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

在我拼凑起来之前，这给我带来了很多痛苦。

Question 4

除了@jwize的答案

因为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' ) ;