如何在Angularjs中使用document.getElementById（）方法

Question

我在javascript中编写了hide()和show()个函数，并在onmousedown代码中的HTML上调用它们。

功能如下：

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

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

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

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

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

我们可以在document.getElementById()中使用Angularjs吗？我是angularjs的新手。有人可以帮帮我吗？

Answer 1

Angular的优点在于您的数据状态应该控制您的视图会发生什么。

如果您正在调用的功能，您似乎想要使用ng-show / ng-hide / ng-if。

Angular Docs

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

在您的控制器中

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

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

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

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

在你的控制器中（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;
 }
}

Answer 2

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

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

例如，您可以使用

重新加载另一个iframe的内容

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

Answer 3

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

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

Answer 4

您可以使用ngShow来控制样式，使用ngMousedown来设置标记：

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

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

ngShow和ngHide的作用是切换将ng-hide设置为display:none;的{​​{1}}类。