如何在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;
}

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

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

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