[英]How to use document.getElementById() method in Angularjs
I have written hide()
and show()
functions in javascript and calling them on onmousedown
in HTML
code. 我在javascript中编写了
hide()
和show()
函数,并在HTML
代码中调用onmousedown
。
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 Angularjs
code. 我想将其转换为
Angularjs
代码。 Can I write like this? 我可以这样写吗?
$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
? 我们可以在
Angularjs
使用document.getElementById()
吗? I am new to angularjs
. 我是
angularjs
。 Can anyone please help me out for this? 有人可以帮帮我吗?
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
。
<div class="elementYouWantToTarget" ng-show="expressionOrVariableThatEvaluatesToTrueOrFalseWhichWillEitherShowOrHideYourElementComingFromAnAngularControllerInThisElementsScope">
<stuff>...</stuff>
</div>
And in your controller 并在你的控制器
angular.controller("myAwesomeExampleControllerExplainingAngular", ["$scope", controllerFn]);
function controllerFn($scope) {
$scope.expressionOrVariableThatEvaluatesToTrueOrFalseWhichWillEitherShowOrHideYourElementComingFromAnAngularControllerInThisElementsScope = true;
}
ng-mousedown
directive and attach it to your element: 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;
}
}
Even if you shouldn't have to, there's occasions where you want to do it (for instance, comunicating with other iframe). 即使你不应该这样做,也有时候你想要这样做(例如,与其他iframe交流)。 then, it's good to use $document for unit testing purposes.
那么,使用$ document进行单元测试是件好事。 In that case: Inject $document in your controller and use it.
在这种情况下:在控制器中注入$ document并使用它。 Remember $document returns an array.
记住$ 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);
You can use ngShow
for controlling the style, and ngMousedown
for 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;
在你的控制器中,只需设置
$scope.isVisible = true;
(or false
) to toggle between the states. (或
false
)在州之间切换。 You also have the ngHide
for controlling whether to hide the element based on the expression. 您还可以使用
ngHide
来控制是否根据表达式隐藏元素。
What both ngShow
and ngHide
does is toggling the ng-hide
class that set the display:none;
ngShow
和ngHide
作用是切换设置display:none;
的ng-hide
类display:none;
to the element. 对元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.