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

Posted 2023-05-07

【中文标题】如何获取使用 Angular js 绑定的 div 的内容？

【英文标题】：How to get the content of a div that uses Angular js binding?

【发布时间】：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，谢谢，您的评论和小提琴说明了根本问题。

【参考方案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 中使用。