How to use document.getElementById() method in Angularjs

Question

I have written hide() and show() functions in javascript and calling them on onmousedown in HTML code.

Functions as below:

function show() {
  document.getElementById("formDiv").style.display = "block";
}

function hide() {
  document.getElementById("formDiv").style.display = "none";
}

I want to convert this into Angularjs code. Can I write like this?

$scope.show = function() {
  document.getElementById("formDiv").style.display = "block";
}

$scope.hide = function() {
  document.getElementById("formDiv").style.display = "none";
}

Can we use document.getElementById() in Angularjs? I am new to angularjs. Can anyone please help me out for this?

Answer 1

The beauty of Angular is that the state of your data should control what happens to your view.

In the case of the functions you are calling, it appears like you want to use maybe ng-show/ng-hide/ng-if.

Angular Docs

<div class="elementYouWantToTarget" ng-show="expressionOrVariableThatEvaluatesToTrueOrFalseWhichWillEitherShowOrHideYourElementComingFromAnAngularControllerInThisElementsScope">
   <stuff>...</stuff>
</div>

And in your controller

angular.controller("myAwesomeExampleControllerExplainingAngular", ["$scope", controllerFn]);

function controllerFn($scope) {
 $scope.expressionOrVariableThatEvaluatesToTrueOrFalseWhichWillEitherShowOrHideYourElementComingFromAnAngularControllerInThisElementsScope = true;
}

EDIT: So according to Amit (and if I understood correctly), he wants to show or hide this element based on mouse down event. Once again if we stick to the focus that we want to change the data in angular to perform view state changes we can use ng-mousedown directive and attach it to your element:

<div class="elementYouWantToTarget" 
    ng-show="expressionOrVariableThatEvaluatesToTrueOrFalseWhichWillEitherShowOrHideYourElementComingFromAnAngularControllerInThisElementsScope"
    ng-mousedown="expressionLivingInYourControllerSomewhereThatIsCalledWhenTheMouseDownDeventFiresOnYourElement()"
    ng-mouseup="expressionDoingTheSameThingExceptForWhenTheMouseUpEventHappens()">
   <stuff>...</stuff>
</div>

And in your controller (PS. I'm assuming on mouse up the element disappears, otherwise you don't need the ng-mouseup directive or functions bound to it).

angular.controller("myAwesomeExampleControllerExplainingAngular", ["$scope", controllerFn]);

function controllerFn($scope) {
 $scope.expressionOrVariableThatEvaluatesToTrueOrFalseWhichWillEitherShowOrHideYourElementComingFromAnAngularControllerInThisElementsScope = false;
 $scope.expressionLivingInYourControllerSomewhereThatIsCalledWhenTheMouseDownDeventFiresOnYourElement = function reallyLongButShouldBeNamedStillFn($event) {
  //setting variable to true shows element based on ng-show
  $scope.expressionOrVariableThatEvaluatesToTrueOrFalseWhichWillEitherShowOrHideYourElementComingFromAnAngularControllerInThisElementsScope = true;
 }

 $scope.expressionDoingTheSameThingExceptForWhenTheMouseUpEventHappens() = nameAllYourFunctionsFn($event) {
  //setting variable to false hides element based on ng-show. 
  $scope.expressionOrVariableThatEvaluatesToTrueOrFalseWhichWillEitherShowOrHideYourElementComingFromAnAngularControllerInThisElementsScope = false;
 }
}

Answer 2

Even if you shouldn't have to, there's occasions where you want to do it (for instance, comunicating with other iframe). then, it's good to use $document for unit testing purposes. In that case: Inject $document in your controller and use it. Remember $document returns an array.

$document[0].getElementById('element-id')

For instance, you can reload another iframe's content with

$document[0].getElementById('element-id').contentDocument.location.reload(true);