Amit Amit - 4 months ago 419
Javascript Question

How to use document.getElementById() method in Angularjs

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

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