Javascript 如何在 Angularjs 中使用 document.getElementById() 方法

How to use document.getElementById() method in Angularjs

提问by Amit

I have written hide()and show()functions in javascript and calling them on onmousedownin HTMLcode.

我已经写了hide()，并show()在JavaScript，并呼吁他们在功能onmousedown的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 into Angularjscode. Can I write like this?

我想将其转换为Angularjs代码。我可以这样写吗？

$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?

我们可以使用document.getElementById()的Angularjs？我是新手angularjs。任何人都可以帮我解决这个问题吗？

回答by Sean Larkin

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

Angular 的美妙之处在于你的数据状态应该控制你的视图会发生什么。

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

在您呼叫的功能的情况下，它看起来像你想也许使用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-mousedowndirective and attach it to your element:

编辑：所以根据 Amit（如果我理解正确的话），他想根据鼠标按下事件显示或隐藏这个元素。再一次，如果我们坚持要以角度更改数据以执行视图状态更改的焦点，我们可以使用ng-mousedown指令并将其附加到您的元素：

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

并且在您的控制器中（PS。我假设鼠标向上时元素消失，否则您不需要 ng-mouseup 指令或绑定到它的函数）。

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

回答by Chexpir

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.

即使您不应该这样做，有时您也想这样做（例如，与其他 iframe 通信）。那么，最好使用 $document 进行单元测试。在这种情况下：在您的控制器中注入 $document 并使用它。记住 $document 返回一个数组。

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

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

例如，您可以重新加载另一个 iframe 的内容

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

回答by laszlokiss88

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

您可以document.getElementById()在 Angularjs中使用，但在控制器中操作 HTML 不是一个好习惯。

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

我建议你创建一个指令并在那里做这种事情。

回答by Alon Eitan

You can use ngShowfor controlling the style, and ngMousedownfor setting the flag:

您可以ngShow用于控制样式和ngMousedown设置标志：

<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 ngHidefor controlling whether to hide the element based on the expression.

在您的控制器中，只需设置$scope.isVisible = true;（或false）即可在状态之间切换。您还可以ngHide根据表达式控制是否隐藏元素。

What both ngShowand ngHidedoes is toggling the ng-hideclass that set the display:none;to the element.

什么都ngShow和ngHide做的是拨动ng-hide该设置类display:none;的元素。