如何获取使用 Angular js 绑定的 div 的内容？答案

【问题标题】：How to get the content of a div that uses Angular js binding?如何获取使用 Angular js 绑定的 div 的内容？
【发布时间】：2015-02-07 23:41:35
【问题描述】：

我想获取包含角度范围绑定数据的 div 的内容。

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

在控制器中的什么位置，

$scope.someText = 'Hello World';

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

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

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

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

如何做到这一点？

【问题讨论】：

您可能试图在 Angular 有机会处理它之前过早地获取该值。 innerHtml 应该是 innerHTML 并尝试在超时中包装它。 setTimeout(function(){ console.log(document.getElementById('someDiv').innerHtml); });jsbin.com/lodazaxose/4/edit
您可能需要等到 Angular 的摘要周期结束。仅在 setTimeout() 上执行此操作可能还不够。
@PSL，谢谢，您的评论和小提琴说明了根本问题。

标签： javascript html angularjs

【解决方案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/

【讨论】：

谢谢，指令示例很棒。您将如何修改指令以通过控制器内的变量访问呈现的 html？
该答案取决于您计划在何处/如何使用 HTML。将数据存储在控制器中似乎不正确。如果您需要应用程序中多个不同位置的数据，将数据存储在服务中会更有意义。或者，您可以将数据存储在指令的控制器中，尽管只有子指令可以使用它，但它也可以直接在 HTML 中使用。