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

Question

这是 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>

这是 js:

function MyCtrl($scope) 
{
    $scope.open = function () {
        $('#modal-to-open').dialog('open');
    }
}

这是执行此操作的最佳方法吗？似乎有一种更好的方法可以在不访问 DOM 的情况下打开它，但我不确定我会如何去做。上面的代码有效，我只是想知道这是否是我应该这样做的方式。欢迎任何意见。

Answer 1

“最佳实践”在这里是模糊的。如果它可读并且有效，那么你就完成了 90%，IMO，而且可能没问题。

也就是说，“Angular 方式”是将 DOM 操作排除在 Controller 之外，并使用依赖注入(inject)来确保一切都是可测试的。显然，上面说明的方式很难测试，并且在 Controller 中放置了一些 DOM 操作。

我想我会做的就是使用指令来从 Controller 中获取 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>

现在，这显然是非常基本的。如果您愿意，您可以对此进行相当高级的操作，为对话框中的不同选项添加附加属性。

您可以更进一步，添加一个为您打开对话框的服务，这样您就可以将其注入(inject)您的 Controller 甚至您的指令中，并以这种方式从那里获取调用。例如:

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

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

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

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