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

Question

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

功能如下：

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

我们可以在Angularjs使用document.getElementById()吗？ 我是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;
}

编辑：所以根据阿米特（如果我理解正确），他想基于鼠标按下事件显示或隐藏这个元素。 再一次，如果我们坚持我们想要更改角度数据的焦点来执行视图状态更改，我们可以使用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不是一个好习惯。

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

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作用是切换设置display:none;的ng-hide类display:none; 对元素。