javascript - AngularJs和jQuery UI，如何确保 Controller 中没有UI代码

Question

我使用 AngularJS 作为构建 Web 应用程序的框架。 DI 非常适合单元测试，AnguarJS 也有一个最佳实践，即 Controller 中没有 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>    

然后在 Controller 中我有代码

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

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

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

Answer 1

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

你最好使用 angular-ui它使用 bootstrap 和纯 angularjs 实现类似功能(无 jquery/jquery ui 依赖)。不过，它并没有尝试复制 jQuery UI，而是复制了 bootstrap 的 JS 功能，因此这不是直接替代。如果可能的话，我建议您首先尝试寻找纯 angularjs 解决方案。

如果您必须使用 jQueryUI，则可以编写自定义指令，将实际工作委托(delegate)给 jQuery UI。这是 datepicker example ，并且网络上还有更多示例。 directive 关键字将有助于谷歌搜索。

如果你真的想深入研究编写 Angular 指令，Angular-UI 的源代码非常有指导意义，但它需要深入了解作用域、作用域继承、数据绑定(bind)和 Angular 的编译过程。