ng-controller加载后DOM准备好没有被Angular拾取

ng-controller loads after DOM ready not picked up by Angular

本文关键字：Angular 拾取 准备好 加载 DOM ng-controller      更新时间：2023-09-26

我们有一个混合的应用程序，它混合了一些角度和一些香草javascript。我们正试图一点一点地将其转换为有角度的。

我们现在面临的问题是，在应用程序的一部分中，HTML 模板从 ajax 调用注入到 DOM 中。此 HTMl 包含 

ng-controller="MyController"

但是 angular 不会连接这个控制器，因为我们在控制器上放了一个控制台.log它从未出现过。那么，如果它被非角度代码注入到 DOM 中，我们如何告诉 angular 寻找这个控制器。

您需要使用 $compile 来允许 angular 动态编译此 HTML 模板。 $watch将允许您在每次 AJAX 返回的字符串更改时编译此模板。

.HTML 

<html ng-app="app">
  <body>
    <h1>AJAX-provided HTML into Angular-rendered template</h1>
    <div ng-controller="MyController">
      <div dynamic="html"></div>
    </div>
  </body>
</html>

JavaScript

var app = angular.module('app', []);
app.directive('dynamic', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});
function MyController($scope) {
  $scope.updateHtml = function(html){
    $scope.html = "";
  }
}

要强制 jQuery 更新 Angular 代码，您可以尝试为该 DOM 元素调用角度对象（然后访问该对象的控制器）：

jQuery

$.ajax(href, {
  success: function(data){
    var element = angular.element($('#myElement'));
    var scope = element.scope();
    scope.$apply(function(){
       scope.updateHtml(data);
     });
  }
});
相关文章：