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

Question

在观看AngularJS最佳实践后，他们表示不应该在控制器中完成DOM操作，而且我确实完全购买了它。

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

然后我不能去做$（'＃registerDialog'）。modal（'hide'）;因为那是将控制器绑定到DOM元素。

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

Answer 1

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>

我希望这会有所帮助。