AngularJs 和 jQuery UI，如何确保控制器中没有 UI 代码

Question

我使用 AngularJS 作为构建 Web 应用程序的框架。 DI 非常适合单元测试，并且 AnguarJS 也有一个最佳实践，即控制器中没有 DOM UI 相关代码。我也在使用 jQuery UI 来构建 UI。然后我有一个问题：

例如我正在使用 jQuery UI 对话框 http://jqueryui.com/dialog/#modal-confirmation，所以在 HTML 中我有声明对话框的代码：

<div id="dialog-confirm" title="Empty the recycle bin?">
    <p>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

然后我有一个按钮，点击它会弹出对话框

<a ng-click="showDialog()>Click me</a>    

然后在控制器中我有代码

$scope.showDialog = function() {
    $('#dialog-confirm').dialog( //DOM UI code in controller!
        //...
    });
}

这是遵循 jQuery UI 演示代码的基本工作流程：http://jqueryui.com/dialog/#modal-confirmation，我只是将它与 AngularJS 结合起来。它可以工作，但我认为我的代码存在一个大问题：我在控制器中混合了 DOM UI 代码和逻辑，因此它破坏了控制器的可测试性。

在不破坏 DI 原则和可测试性的情况下，如何将 jQueryUI 与 AngularJS 一起使用？

Answer 1

这并不像看起来那么容易。 Angular 有所谓的 directives 用于封装 DOM 代码，但编写指令并非易事 - 很难做到正确。

最好使用angular-ui，它使用引导程序和纯 angularjs（无 jquery / jquery ui 依赖项）实现 类似 功能。它并没有尝试复制 jQuery UI，而是尝试复制引导程序的 JS 功能，因此这不是直接替换。如果可能的话，我建议你先尝试找到一个纯 angularjs 解决方案。

如果您有使用 jQueryUI，您可以编写自定义指令，将实际工作委托给 jQuery UI。这是一个datepicker example，还有更多的例子散落在网上。 directive 关键字将有助于谷歌搜索。

如果你真的想深入研究编写angular指令的深度，angular-ui的源码很有指导意义，但需要深入了解作用域、作用域继承、数据绑定和angular的编译过程。