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);

Answer 3

You can use document.getElementById() in Angularjs, but manipulating HTML in a controller is not a good practice.

I recommend you to create a directive and do this kind of stuff there.

Answer 4

You can use ngShow for controlling the style, and ngMousedown for setting the flag:

<form id="formDiv" ng-show="isVisible" ng-mousedown="isVisible=false" ng-mouseup="isVisible=true"></form>

And In your controller, just set $scope.isVisible = true; (or false ) to toggle between the states. You also have the ngHide for controlling whether to hide the element based on the expression.

What both ngShow and ngHide does is toggling the ng-hide class that set the display:none; to the element.