Question

我们有一个应用程序是混合一些角度和一些香草javascript。我们正在尝试逐渐将其转换为角度。

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

ng-controller="MyController"

但是角度没有连接这个控制器，因为我们在控制器上安装了console.log，它从未出现过。那么如果它通过非角度代码注入到DOM中，我们如何告诉angular寻找这个控制器。

Answer 1

您希望使用$compile允许角度为dynamically compile此HTML模板。每次AJAX返回的字符串更改时，$watch都允许您编译此模板。

<强> 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元素的angular对象（然后访问该对象的控制器）：

<强>的jQuery

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

在DOM准备好未被Angular拾取之后加载ng-controller

1 个答案: