AngularJS + JQuery：如何获得在angularjs中工作的dynamic内容
我正在使用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="angular-1.0.1.min.html"></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>
我有一个dynamic内容的ID与ID #dynamicContent ，我有一个刷新button，刷新点击时，这个div的内容。 如果我不刷新内容，增量将按预期工作，但在刷新后，AngularJS绑定停止工作。
这在AngularJS中可能不是有效的，但是我最初使用jQuery构build应用程序，之后开始使用AngularJS，所以我无法将所有东西都移植到AngularJS中。 任何帮助在AngularJS中得到这个工作是非常感谢。
在将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文档 。
如果您不能控制dynamic内容的另一种解决scheme
如果你没有通过一个指令加载你的元素（例如，在注释的jsfiddles中的例子中），这是有效的。
总结你的内容
把你的内容包装在一个div中，这样你可以select它，如果你正在使用JQuery 。 你也可以select使用原生的JavaScript来获取你的元素。
<div class="selector"> <grid-filter columnname="LastNameFirstName" gridname="HomeGrid"></grid-filter> </div>
使用angular度注射器
如果没有，可以使用下面的代码来获得对$ compile的引用。
$(".selector").each(function () { var content = $(this); angular.element(document).injector().invoke(function($compile) { var scope = angular.element(content).scope(); $compile(content)(scope); }); });
概要
原来的文章似乎假设你有一个$编译参考方便。 当你有参考资料时，显然很容易，但是我没有，所以这就是我的答案。
前面的代码的一个警告
如果您在使用minifyscheme时使用了asp.net/mvc包，则在发布模式下进行部署时将遇到麻烦。 麻烦来了未捕获的错误的forms：[$注射器：unpr]这是由狭窄的angular度javascript代码搞乱造成的。
这是解决这个问题的方法 ：
用下面的重载代替前面的代码片段。
... angular.element(document).injector().invoke( [ "$compile", function($compile) { var scope = angular.element(content).scope(); $compile(content)(scope); } ]); ...
在我拼凑起来之前，这给我造成了很多的伤痛。
除了@jwize的回答
因为angular.element(document).injector()给出了错误injector is not defined所以，我已经创build了可以在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(); }]); } }
通过传递新元素的select器来使用它。 喜欢这个
compileAngularElement( '.user' ) ;
