如何保存 DOM 操作更改？答案

【问题标题】：How to save DOM manipulation changes?如何保存 DOM 操作更改？
【发布时间】：2014-07-31 16:19:10
【问题描述】：

我的控制器中的部分代码删除了一个 DOM 元素：

MetrofficeApp.controller('EmployeesCtrl', function($scope) {
...
angular.element(deleteElem).remove();
$scope.$apply();

当我使用 Angular 离开此页面，然后返回到已删除元素所在的同一页面时 - 元素再次可见。

除了 $scope.$apply() 之外我还必须做什么才能使导航页面之间的更改永久化（保存 DOM 更改）？

【问题讨论】：

标签： angularjs

【解决方案1】：

我觉得您对 DOM 存在根本性的误解。每次导航回页面时，都会重新调用所有代码并重新创建模板。因此，再次创建 DOM 是正确的行为。

我的猜测是您有一些由 DOM 可视化的底层模型。与其删除 DOM 的组件，不如删除由 DOM 可视化的模型部分（并将更改推送到服务器）。这样，下次导航到 DOM 时，模型是一致的，被删除的项不再显示。

还有一个小点，但仍然很重要：控制器不应该直接操作 DOM。您应该为此创建指令。

【讨论】：

【解决方案2】：

您需要在 scope 对象上设置一些标志，Angular js 模板可以使用这些标志来确定是否显示有问题的 dom 元素。

例如

// controller code
scope.shouldShowElement = some.flag;

// angular template
<div ng-show="shouldShowElement">...</div>

Angular 模板可以访问 scope 上的所有变量 - 如果稍后您这样做：

// controller code
scope.shouldShowElement = true;
scope.$apply();

您的模板将更新以反映该更改

【讨论】：