AngularJS控制器-与视图元素交互

AngularJS controller - interacting with view elements?

本文关键字：元素 交互 视图 控制器 AngularJS      更新时间：2023-09-26

在观看了AngularJS的最佳实践后，他们指出不应该在控制器中进行DOM操作，我完全相信这一点。

所以，假设我正在使用Twitter引导程序，并在那里显示一个模式对话框。如果我想通过控制器中的函数关闭此对话框。

那么我就不能继续做$（'#registerDialog'）.modal（'hide'）；因为这是将控制器绑定到DOM元素。

在控制器内执行此操作的正确方法是什么？

Angular使用$scope到DOM之间的数据绑定来完成这类事情。如果你想在发生某些事情时隐藏弹出窗口，你应该在模态对话框的根上使用ng-hide指令，并将其绑定到作用域上存在的布尔值。首先，如果你想在作用域上设置这个值，你所要做的就是在控制器中： 
$scope.isModalHidden = <true|false>

如果这是异步操作（例如超时/服务器响应）的结果，则应该包装前面的语句，如下所示：

$scope.$apply(function(){
  $scope.isModalHidden = <true|false>
});

这将导致Angular重新评估isModalHidden，即使它没有作为"自然"事件流的一部分进行更改。

完成后，您所要做的就是将其绑定到DOM，如下所示：

<div id="registerDialog" ng-hide="{isModalHidden}">...</div>

我希望这能有所帮助。

相关文章：