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的值。如果我不刷新内容，Increment按预期工作，但在刷新后，AngularJS绑定停止工作。

这可能在AngularJS中无效，但我最初使用jQuery构建应用程序，稍后开始使用AngularJS，所以我无法将所有内容都迁移到AngularJS。任何帮助在AngularJS中实现这个功能都非常感谢。

Answer 1

您需要先在HTML字符串上调用$compile，然后再将其插入到DOM中，这样角才有机会执行绑定。

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

$("#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的例子）加载你的元素。

总结了自己的内容

包裹在一个div您的内容，这样就可以，如果你使用的是JQuery的选择它。你也可以选择使用原生javascript来获取你的元素。

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

使用角度喷油器

您可以使用下面的代码来得到，如果你没有一个$参考编译。

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

摘要

原来的职位似乎假设你有一个$编译参考得心应手。当你有参考资料时，显然很容易，但我没有，所以这是我的答案。前面的代码

的

一个警告如果您使用的是带有缩小场景中asp.net/mvc包，你会遇到麻烦，当你在释放模式部署。麻烦来自Uncaught Error的形式：[$ injector：unpr]这是由缩小器与角度javascript代码搞乱造成的。

这里是弥补它方式：

更换prevous代码段有以下过载。

... 
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 所以，我创建的功能，可以在DOM使用jQuery改变AJAX调用后运行或。

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