How to use document.getElementById () method in Angularjs

Question

I wrote hide() and show() functions in javascript and called them onmousedown in HTML .

Functions as below:

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

I want to convert this to 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"; } 

Is it possible to use document.getElementById() in Angularjs ? I am new to Angularjs . Can anyone help me with this?

Answer 1

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

In the case of the functions you are calling, it looks like what you want to use, perhaps 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 the mouse down event. Once again, if we pay attention to the fact that we want to change the data in Angular to make changes to the state of the view, we can use the 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 assume that the element disappears on the mouse, otherwise you do not need the ng-mouseup directive or related functions).

 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 do not need it, where you want to do it (for example, communicating with another iframe). it’s good to use $ document for unit testing purposes. In this case: Put $ document in your controller and use it. Remember that $ document returns an array.

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

For example, you can reload other iframe content with

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

Answer 3

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

I recommend that you create directive and do such things there.

Answer 4

You can use ngShow to style and ngMousedown to set a 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 switch between states. You also have ngHide to control whether the item should be hidden based on the expression.

What both ngShow and ngHide do, toggles the ng-hide class, which sets the display:none; element display:none; into an element.