Jquery ui 从angular打开jquery对话框的最佳实践是什么？

以下是html：

<div ng-controller="MyCtrl">
    <a ng-click="open()">Open Dialog</a>
    <div id="modal-to-open" title="My Title" ui-jq="dialog" ui-options="{width: 350, autoOpen: false, modal: true}">
        Dialog Text
    </div>
</div>

这是最好的方法吗？似乎有一种更好的方法可以在不访问DOM的情况下打开它，但我不确定我会怎么做。上面的代码是有效的，我只是想知道这是否是我应该使用的方法。欢迎任何意见。

“最佳实践”在这里是模糊的。如果它可读并且有效，那么在我看来，你就有90%在那里了，而且可能还不错

也就是说，“角度方法”是将DOM操作排除在控制器之外，并使用依赖项注入来确保一切都是可测试的。显然，上面演示的方法很难测试，并且会在控制器中进行一些DOM操作

我想我要做的是使用一个指令，使DOM操作脱离控制器：

将对话框打开调用与单击元素关联的简单指令：

app.directive('openDialog', function(){
    return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
            var dialogId = '#' + attr.openDialog;
            elem.bind('click', function(e) {
                $(dialogId).dialog('open');
            });
        }
    };
});

在标记中，它的用法如下：

<button open-dialog="modal-to-open">Open Dialog</button>

在这里，它正在使用中。这看起来很傻，因为本质上是一样的。但这主要是因为这是一个非常简单的例子。但它至少利用了DI，并且是可测试的

app.controller('MyCtrl', function($scope, dialogService) {
    $scope.open = function () {
        dialogService.open('#modal-to-open');
    };
});

---

无论如何。我希望所有这些都能帮助你决定你想走哪条路。有一千种方法可以做到这一点。“正确”的方法就是一切可行的方法，允许您做任何您需要做的事情（测试或其他任何事情），并且易于维护。

感谢您提供的详细答案。我想我会走服务路线。我喜欢这样。好建议@ben lesh，dialogService factory中缺少一个“]”。对于那些感兴趣的人，我刚刚完成Angular Bootstrap UI dialog服务，我非常喜欢它：

app.factory('dialogService', [function() {
    return {
        open: function(elementId) {
            $(elementId).dialog('open');
        }
    };
}]);

app.controller('MyCtrl', function($scope, dialogService) {
    $scope.open = function () {
        dialogService.open('#modal-to-open');
    };
});