DOM 操作不适用于 ng-view

Posted 2023-05-09

【中文标题】DOM 操作不适用于 ng-view

【英文标题】：DOM manipulation not working with 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 操作。通常最好尽可能使用框架指令

【参考方案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 对象。