DOM 操作不适用于 ng-view答案

【问题标题】：DOM manipulation not working with ng-viewDOM 操作不适用于 ng-view
【发布时间】：2015-03-02 13:41:08
【问题描述】：

这里的代码太多，请见谅。

我有一个基本应用程序，它有一个模块、控制器和 ng-view/routProvider。

如果我在我的控制器中执行以下操作，console.log(angular.element('div').length) 控制台会吐出我有 10 个 DIV 元素。这是对的。

但是，当我尝试通过 angular.element('div').remove() 操作上述 DOM 元素时，只会删除 ng-view 之外的 DOM 元素。

有人可以解释发生了什么吗？非常感激。

编辑：我刚刚注意到，如果我执行删除然后运行 angular.element('div').length，长度会变为 0，但 ng-view 内容保持不变。所以我的猜测是删除元素后视图没有更新..

【问题讨论】：

您至少需要发布基本代码。听起来你应该使用指令。 DOM 操作不是从控制器完成的。还需要显示您如何调用 angular.element('div').remove() ，如果它在摘要循环之前，您想要的元素甚至可能不存在。你知道它会删除 DOM 中的每个 div 吗？
DOM 操作永远不应该在控制器中完成。如果需要，您应该使用指令来进行 DOM 操作。通常最好尽可能使用框架指令

标签： javascript jquery html angularjs dom

【解决方案1】：

如果您使用的是 AngularJs，那么您需要让 DOM 与您的通过 AngularJs 获取数据。

这是最简单的例子。

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.items = [{
    name: 'A'
  }, {
    name: 'B'
  }, {
    name: 'C'
  }, {
    name: 'D'
  }, ];

  $scope.remove = function() {
    $scope.items.splice(1, 2);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="MainCtrl">

  <ul ng-repeat="item in items">
    <li>{{ item.name }}
  </ul>

  <button type="button" ng-click="remove()">remove</button>

</div>

最初，数组中有 4 个项目，直到用户点击“删除”按钮从数组中删除 2 个项目。 DOM 会根据 Array 的变化自动更新。

【讨论】：

谢谢你，托什——这是我通常做的；但是，如果您从 $scope.remove 中删除了数组拼接函数并添加了 angular.element('li').remove() 会起作用吗？请回复我，然后我可以接受您的回答。提前致谢。
我相信ng-repeat、ng-if、ng-hide 等 DOM 级别的操作是单向绑定（从 js 对象到 DOM）作为 Angular 监视 js 对象并将其反映到 html。因此，直接操作 DOM 不会传播到 js 对象。