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的div中有动态内容#dynamicContent,并且我有一个刷新按钮,可以在单击刷新时更新此div的内容.如果我不刷新内容,增量将按预期工作,但在刷新后,AngularJS绑定将停止工作.

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

Answer 1

您需要$compile在将HTML字符串插入DOM之前调用HTML字符串,以便angular有机会执行绑定.

在你的小提琴中,它看起来像这样.

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

显然,$compile必须注入您的控制器才能使其正常工作.

阅读$compile文档中的更多内容.

Answer 2

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

如果您没有通过指令加载元素(例如,在注释的jsfiddles中的示例中),则此方法有效.

总结您的内容

将您的内容包装在div中,以便在使用JQuery时可以选择它.您还可以选择使用原生javascript来获取您的元素.

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

使用角度注射器

如果没有,可以使用以下代码获取对$ 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软件包,则在发布模式下部署时会遇到麻烦.麻烦来自Uncaught Error:[$ injector:unpr],这是由于minifier破解了角度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 所以,我创建了一个可以在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' ) ;