Question

我遇到了一个非常奇怪的$ compile服务情况。我正在尝试使用我的控制器编译我从后端获得的模板。

这是JS：

angular.module('app', []);

angular.module('app').controller('AC', ['HtmlProcessor', function Actrl(HtmlProcessor) {
  this.abc = 'Hello!';
  this.do = function () {
    alert(HtmlProcessor.getHTML(this));
  };
}]);

angular.module('app').service('HtmlProcessor', ['$compile', function ($compile) {
  this.getHTML = function (scope) {
    return $compile('<p>{{ abc }}</p>')(scope).html();
  };
}]);

这是HTML：

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller="AC as ac">
  <button ng-click="ac.do()">Compile!</button>
</body>
</html>

所以，问题是，当我调用ac.do()时，我得到一个错误（在angular的textInterpolateFn中）并且模板没有被编译。我做错了什么？

Answer 1

最后，我找到了问题的根源。链接后我不得不运行摘要周期。因此，我正在创建一个新的范围，用数据填充它，将其传递给链接函数并触发摘要：

this.getHTML = function (scope) {

  var newScope = $rootScope.$new();
  angular.extend(newScope, scope);

  var compiled = $compile('<p>{{ abc }}</p>')(newScope);

  newScope.$apply();

  return compiled.html();
};

Answer 2

在此函数签名中，您需要Scope个实例：

/*
 * @param {Scope} scope
 */
this.getHTML = function (scope) {

此外，$compile返回一个复合链接函数，该函数需要范围，然后将其传递给所有指令控制器和链接函数，这些函数也需要范围类型。

您向函数传递了错误的类型：

alert(HtmlProcessor.getHTML(this));

在你的情况下，这个关键字丢失了它的上下文，但即使你像这样保存它：

this.do = angular.bind(this, function () { alert(HtmlProcessor.getHTML(this)); });

它不起作用，因为控制器的上下文（ this ）不是 Scope 类型，它只是类型构造函数<的通用Function对象/强>

例如，在您的代码中，它将在此指令中失败：

Angular的编译不起作用

2 个答案: