使用AngularJS删除DOM元素

Question

我正在尝试根据当前位置路径删除导航栏。

目前，我已经完成了以下内容：

angular.module('myModule')
  .controller('MainController', function ($location, $document) {
    if ($location.path().indexOf('resetpass') > -1) {
      var navbar = angular.element($document.querySelector(".top-navbar"));
      navbar.remove();
    }
  });

采用这种方法，控制台会显示：

angular.js:14110 TypeError: $document.querySelector is not a function
at new <anonymous> (main.controller.js:6)
at Object.invoke (angular.js:4762)
at $controllerInit (angular.js:10518)
at nodeLinkFn (angular.js:9416)
at compositeLinkFn (angular.js:8757)
at compositeLinkFn (angular.js:8760)
at publicLinkFn (angular.js:8637)
at angular.js:1808
at Scope.$eval (angular.js:17913)
at Scope.$apply (angular.js:18013)

我做错了什么？

- Codehan25

Answer 1

使用 ngIf 在你的 DOM 元素中，并像这样执行：

模板：

<element ng-if="hideElemet"></element>

控制器：

if ($location.path().indexOf('resetpass') > -1) {
      $scope.hideElement = false
}

ngIf将从DOM中删除该元素

- ZEE

Answer 2

使用document而不是$document。

var navbar = angular.element(document.querySelector(".top-navbar")).remove();

- Petya Naumova

---

控制台错误已经消失，但导航栏仍然可见。 - Codehan25

执行 navbar.remove(); 后仍然可见吗？ - Petya Naumova

Answer 3

我觉得Ze Rubeus的隐藏导航栏的方式更合理，但如果你想继续使用你现在的方法，这应该可以工作：

angular.module('myModule')
 .controller('MainController', function ($location, $document) {
   if ($location.path().indexOf('resetpass') > -1) {
     var navbar = angular.element($document[0].querySelector(".top-navbar"));
     navbar[0].remove();
   }
});

Angular包装了所有的DOM元素，所以要直接访问该元素，需要获取第一个元素。

- sledsworth

---

不知道为什么，但它无法正常工作。我采用了Ze Rubeus的方法。 - Codehan25