我可以获得 Angular 元素的编译后的 html 吗? [英] Can I get the compiled html of an Angular element?
问题描述
我使用 $compile 服务编译了一个元素.如果我将它直接添加到 DOM,它看起来很棒并且所有的绑定都是正确的.如果我想要该元素作为字符串,它会显示 {{stuffHere}}
而不是绑定.有没有办法在编译后获取元素的html?
$templateCache.put('template', '<div><div><div><span>内容是{{content}}</span></div><;/div></div>');$scope.content = '你好,世界!';var el = $compile($templateCache.get('template'))($scope);$('body').append(el);警报(el.html());
http://plnkr.co/edit/1sxvuyUZKbse862PieBa?p=preview
附加到正文的元素显示 content is Hello, World!
警报显示
>
我希望从警报中看到的是
代码>
问题是您过早地阅读元素的内容.如果您在阅读中添加 $timeout
它将是正确的:
angular.module('demo', []);angular.module('demo').controller('PopoverDemoCtrl', function($scope, $timeout, $compile, $templateCache) {$templateCache.put('template', '<div><div><div><span>内容是{{content}}</span></div></div></div>');$scope.content = '你好,世界!';var el = $compile($templateCache.get('template'))($scope);$('body').append(el);$超时(功能(){console.log(el.html());}, 300);//稍等片刻});
为什么需要$timeout
?
$compile
方法被调用后不会立即生效.这是由于 $digest
循环,因为它使用 $scope
它需要运行 $digest
循环以查看是否有任何影响$scope.content
.这就是为什么您必须设置 $timeout
的原因,您需要等到 $digest
循环完成后元素的内容才真正被更改.您可以在此处阅读更多关于这一切如何联系在一起的信息.
I have compiled an element using the $compile service. If I add that directly to the DOM, it looks great and all of the bindings are correct. If I want that element as a string though, it shows {{stuffHere}}
instead of the bindings. Is there a way to get the html of the element after it's compiled?
$templateCache.put('template', '<div><div><div><span>content is {{content}}</span></div></div> </div>');
$scope.content = 'Hello, World!';
var el = $compile($templateCache.get('template'))($scope);
$('body').append(el);
alert(el.html());
http://plnkr.co/edit/1sxvuyUZKbse862PieBa?p=preview
The element appended to the body shows content is Hello, World!
The alert shows <div><div><span ng-binding>{{content}}</span></div></div>
What I would like to see out of the alert is <div><div><span ng-binding>Hello World</span></div></div>
The issue is you're reading the contents of the element too early. If you add a $timeout
to your read it will be correct:
angular.module('demo', []);
angular.module('demo').controller('PopoverDemoCtrl', function($scope, $timeout, $compile, $templateCache) {
$templateCache.put('template', '<div><div><div><span>content is {{content}}</span></div></div></div>');
$scope.content = 'Hello, World!';
var el = $compile($templateCache.get('template'))($scope);
$('body').append(el);
$timeout(function() {
console.log(el.html());
}, 300); // wait for a short while
});
Why is $timeout
required?
After the $compile
method is called it will not immediately take effect. This is due to the $digest
cycle, since it uses the $scope
it needs to run the $digest
cycle to see if anything has affected $scope.content
. This is why you have to set a $timeout
, you need to wait until the $digest
cycle completes before the element's content actually gets changed. You can read a bit more about how this all ties together here.
这篇关于我可以获得 Angular 元素的编译后的 html 吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!