Delete DOM element with AngularJS

Question

I am trying to remove the navigation bar based on the current path.

This is what I have so far:

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

With this approach, the console says:

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)

What am I doing wrong?

Answer 1

use ngIfin the element DOMand do something like this:

Template:

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

Controller:

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

ngIf will remove an item from the DOM

Answer 2

Try with document, not $document.

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

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, .