在 AngularJS 中动态操作 DOM 元素答案

【问题标题】：Dynamically manipulating DOM element in AngularJS在 AngularJS 中动态操作 DOM 元素
【发布时间】：2013-12-09 08:01:27
【问题描述】：

我需要使用 AngularJS 从我的数据库中呈现所有帖子。我需要为用户可见的每个帖子提供编辑功能。目前，我正在使用“edit-post”指令来执行此操作。这是为此的链接功能。

link: function ($scope, element, attrs) {
            element.bind('click', function () {
                var divId = $scope.$parent.post.meta.id + "Data";

                var html = $compile("<div class='editTextAreaDiv' id='" + divId + "'>" +
                            "<textarea  class='editTextArea' id='editBox' rows='3' ng-model='editedPostText' name='editedPostText'>" + $scope.$parent.post.meta.data + "</textarea><br />" +

                            "<span class='pull-right'>" +
                                "<input class='btn' type='button' value='Save'  ng-click='saveEditedPost(\"" + divId + "\")'/>" +
                                "<input class='btn' type='button' value='Cancel' ng-click='cancelEdit(\"" + divId + "\")'/>" +
                            "</span>" +
                        "</div>")($scope);
                $("#" + divId).html(html);
            });

}

我通过动态添加一个 textarea 和 2 个按钮来操作 DOM。

我的问题是这种动态操作 DOM 元素的方法在 Angular 世界中是否更可取。或者我应该采用其他方法（例如使用 ng-show/ng-hide 指令来显示/隐藏 textarea 和 2 个按钮）。

注意：我不想使用 ng-show/ng-hide，因为我不想为每个帖子引入额外的 textarea 和 2 个按钮。

请指导我。

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

我认为你应该使用Directives。

将您的 HTML 放入 javascript 是不好的，并且打破了 angular 背后的想法，该想法旨在将逻辑与视图分离，并保持您的对象有损耦合。

在此处查看类似问题：HTML template in AngularJS like KnockoutJS

【讨论】：

那么为页面上的每个帖子添加一个文本区域（使用 ng-show/ng-hide）可以吗？对于 100 篇文章，这意味着添加那么多文本区域和按钮。
不，您将构建一个用于所有项目的模板。
是的。但是仍然会在编译时加载所有文本区域，对吗？与绑定的模型值。