从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

这里的“最佳实践”是模糊的基础。如果它可读并且可以工作，那么IMO，您就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>

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

您甚至可以走得更远，添加一个服务来为您打开对话框，这样您就可以将其注入到控制器甚至指令中，然后以这种方式进行调用。例如：

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');
    };
});

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