Comment utiliser document.getElementById (), méthode d'Angularjs

J'ai écrit hide() et show() des fonctions en javascript et en les appelant sur onmousedown dans HTML code.

Fonctions comme ci-dessous:

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

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

Je veux le convertir en un Angularjs code. Puis-je écrire comme ça?

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

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

Peut-on utiliser document.getElementById() dans Angularjs? Je suis nouveau sur angularjs. Quelqu'un peut-il svp m'aider pour cela?

Eh bien, vous l'utiliser, cela ne signifie pas que vous doit.
vous pouvez probablement obtenir ce que vous voulez à l'aide de ng-si, si vous voulez juste pour se montrer et cacher.

OriginalL'auteur Amit | 2015-11-16

  1. 21

    La beauté de l'Angulaire de l'état de vos données doit contrôler ce qui se passe à votre vue.

    Dans le cas des fonctions que vous appelez, il apparaît comme vous voulez utiliser peut-être ng-show/ng-hide/ng-if.

    Angulaire Docs

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

    Et dans votre contrôleur

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

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

    EDIT: Donc, selon Amit (et si j'ai bien compris), il veut montrer ou cacher cet élément basé sur la souris vers le bas de l'événement. Une fois de plus, si nous nous en tenons à la mise au point que nous voulons changer les données dans angulaire pour effectuer l'état d'affichage changements que nous pouvons utiliser ng-mousedown la directive et le joindre à votre élément:

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

    Et dans votre contrôleur (PS. Je suppose que sur la souris l'élément disparaît, sinon vous n'avez pas besoin de la ng-mouseup directive ou fonctions qui lui sont liées).

    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;
 }
}
    juste pour le joli nom de la variable de vous mérite le upvote
    HUMIDE de la Programmation, c'est ma vie. Merci haha.
    Je veux montrer que la div sur la souris vers le bas.
    Bon je vais mettre à jour la réponse. Theres une directive pour que :-D.
    Est-ce à clarifier @Amit

    OriginalL'auteur Sean Larkin

  2. 7

    Même si vous n'avez pas à l', il y a des occasions où vous voulez le faire (par exemple, comunicating avec d'autres iframe). ensuite, il est bon d'utiliser $document pour l'unité des fins de test.
    Dans ce cas:
    Injecter $document dans votre contrôleur et de l'utiliser. Rappelez-vous $document renvoie un tableau.

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

    Par exemple, vous pouvez recharger un autre contenu de l'iframe avec

    $document[0].getElementById('element-id').contentDocument.location.reload(true);
    Par curiosité, pourquoi est-il nécessaire d'utiliser [0] avant getElementById lors de l'utilisation de $document?

    OriginalL'auteur Chexpir

  3. 6

    Vous pouvez utiliser document.getElementById() dans Angularjs, mais la manipulation de code HTML dans un contrôleur n'est pas une bonne pratique.

    Je vous recommande de créer un la directive et de faire ce genre de choses là.

    OriginalL'auteur laszlokiss88

  4. 3

    Vous pouvez utiliser ngShow pour contrôler le style, et ngMousedown pour le paramétrage de l'indicateur:

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

    Et Dans votre contrôleur, il suffit de définir $scope.isVisible = true; (ou false) pour basculer entre les états. Vous avez également la ngHide pour le contrôle que pour masquer l'élément en fonction de l'expression.

    Ce que les deux ngShow et ngHide n'est le basculement de la ng-hide classe que jeu de la display:none; à l'élément.

    OriginalL'auteur Alon Eitan