如何在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; 對元素。