javascript - 如何获取使用 Angular js 绑定(bind)的 div 的内容？

Question

我想获取包含 Angular 范围绑定(bind)数据的 div 的内容。

<div id='someDiv'> <h1> {{someText}} </h1> </div>

在 Controller 中，

$scope.someText = 'Hello World';

innerHtml 属性不起作用。 document.getElementById('someDiv').innerHtml 不起作用，因为它返回未绑定(bind)的变量

var content = document.getElementById('someDiv').innerHtml;控制台日志(内容)；

记录结果 <h1> {{someText}} </h1>

我希望它在变量绑定(bind)到它的值后返回 div 内容，就像这样 '<h1> Hello World! </h1>'

如何实现？

Answer 1

你会想要在 Angular 中使用 $timeout 服务。可能会创建一个指令来提取 HTML，因为没有确定的方法可以知道在 Angular 之外时摘要循环何时完成。

这是一个这样的指令的例子:

module.directive('getRenderedHtml', function($timeout) {
    return {
        controller: function ($scope) {
            return {};
        },
        requires: 'getRenderedHtml',
        link: function(scope, element, attrs, thisController) {
            var rawHtmlContainer = angular.element('<div></div>');
            $timeout(function() {
                thisController.html = element[0].innerHTML;
            });
        }
    }
});

http://jsfiddle.net/rnpn8rj0/