DOM 操作不适用于 ng-view

Question

这里代码太多，请见谅。

我有一个基本应用程序，它只有一个模块、控制器和 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 内容保持不变。所以我的猜测是在我删除元素后视图没有更新..

Answer 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 个项目，直到用户点击 "remove" 按钮从数组中删除 2 个项目。 DOM 根据数组的变化自动更新。

DOM 操作不适用于 ng-view

DOM manipulation not working with ng-view

html

javascript

jquery

dom

angularjs