从角度打开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,它可能很好.

也就是说,"角度方式"是将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');
    };
});

无论如何.我希望所有这些都能帮助你决定你想要走的路.有一千种方法可以做到这一点."正确"的方式是任何有效的方式,允许您做任何您需要做的事情(测试或其他任何事情),并且易于维护.