9

我已经使用 $compile 服务编译了一个元素。如果我直接将它添加到 DOM，它看起来很棒并且所有绑定都是正确的。如果我希望该元素作为字符串，它会显示{{stuffHere}}而不是绑定。有没有办法在编译后获取元素的html？

$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

附加到正文的元素显示content is Hello, World!

警报显示<div><div><span ng-binding>{{content}}</span></div></div>

我想从警报中看到的是<div><div><span ng-binding>Hello World</span></div></div>

4

1 回答 1

13

问题是您过早地阅读元素的内容。如果您将 a 添加$timeout到您的阅读中，它将是正确的：

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
});

更新的 Plunker

为什么$timeout需要？

方法调用后$compile不会立即生效。这是由于$digest循环，因为它使用$scope它需要运行$digest循环以查看是否有任何影响$scope.content。这就是为什么您必须设置 a 的原因$timeout，您需要等到$digest循环完成之后元素的内容才会真正更改。您可以在这里阅读更多关于这一切如何联系在一起的信息。

于 2014-10-30T18:27:13.773 回答