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

Question

在观看了 AngularJS 最佳实践之后，他们声明不应该在控制器中完成 DOM 操作，我完全同意这一点。

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

然后我不能去做 $('#registerDialog').modal('hide'); 因为这将控制器绑定到 DOM 元素。

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

score 0 · Accepted Answer

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>

我希望这有帮助。

1 回答 1