I've faced a really strange situation with $pile service. I'm trying to pile a template which I get from back-end using my controller.
Here is 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', ['$pile', function ($pile) {
this.getHTML = function (scope) {
return $pile('<p>{{ abc }}</p>')(scope).html();
};
}]);
Here is HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis/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>
So, the problem is that when I call ac.do() I get an error (in angular's textInterpolateFn) and template is not piled. What am I doing wrong?
I've faced a really strange situation with $pile service. I'm trying to pile a template which I get from back-end using my controller.
Here is 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', ['$pile', function ($pile) {
this.getHTML = function (scope) {
return $pile('<p>{{ abc }}</p>')(scope).html();
};
}]);
Here is HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis./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>
So, the problem is that when I call ac.do() I get an error (in angular's textInterpolateFn) and template is not piled. What am I doing wrong?
2 Answers
Reset to default 6Finally, I've found the root of the problem. After linking I had to run digest cycle. Thus, I am creating a new scope, populate it with data, pass it to linking function and trigger digest:
this.getHTML = function (scope) {
var newScope = $rootScope.$new();
angular.extend(newScope, scope);
var piled = $pile('<p>{{ abc }}</p>')(newScope);
newScope.$apply();
return piled.html();
};
In this function signature you expecting a Scope instance:
/*
* @param {Scope} scope
*/
this.getHTML = function (scope) {
Also, $pile returns a posite linking function that expects a Scope, which in turn is passed on to all directives controllers and linking functions which also expects a Scope type.
You passed a wrong type to the function:
alert(HtmlProcessor.getHTML(this));
In your case the this keyword lost it's context but even if you saved it like so:
this.do = angular.bind(this, function () {
alert(HtmlProcessor.getHTML(this));
});
It wouldn't work, because a controller's context (this) is not of a Scope type, its just a generic Function object of type Constructor
For example in your code it would fail in this directive:
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744879030a4598724.html
评论列表（0条）