我使用$ 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>
答案 0 :(得分:13)
问题是你过早地阅读元素的内容。如果您在阅读中添加$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
});
$timeout
?调用$compile
方法后,它不会立即生效。这是由于$digest
周期,因为它使用$scope
运行$digest
周期来查看是否有任何影响$scope.content
。这就是您必须设置$timeout
的原因,您需要等到$digest
周期完成后才能更改元素的内容。您可以阅读更多关于这一切如何联系在一起的here。