Iva*_*nko 0 javascript templates compilation angularjs
我用$ 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中)并且模板没有被编译.我究竟做错了什么？
最后,我找到了问题的根源.链接后我不得不运行摘要周期.因此,我正在创建一个新的范围,用数据填充它,将其传递给链接函数并触发摘要:
this.getHTML = function (scope) {
var newScope = $rootScope.$new();
angular.extend(newScope, scope);
var compiled = $compile('<p>{{ abc }}</p>')(newScope);
newScope.$apply();
return compiled.html();
};