我可以获得 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!

警报显示

{{content}}

我希望从警报中看到的是

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);//稍等片刻});

更新的Plunker

为什么需要$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
});

Updated Plunker

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屋！