什么是从角打开一个jQuery对话框的最佳做法？ [英] What is the best practice for opening a jquery dialog from angular?

问题描述

继承人的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打开它一个更好的方式，但我不知道我怎么会去有关。以上code的作品，我只是想知道，如果这是我应该去这样做的方式。任何投入是值得欢迎的。

Is this the best way to go about doing this? It seems like there could be a better way of opening it without accessing the DOM but I am not sure how I would go about that. The above code works, I am just wondering if this is the way I should go about doing this. Any input is welcome.

推荐答案

最佳实践这里是模糊地。如果它的可读性和它的作品，那么你90％在那里，海事组织，而且它可能罚款。

"Best practice" is fuzzy ground here. If it's readable and it works, then you're 90% there, IMO, and it's probably fine.

这表示，角度的方式是让DOM操作出来的控制器，并使用依赖注入，以确保一切是测试。很明显，你上面图文并茂的方式将很难进行测试，并提出了一些DOM操作控制器。

That said, the "angular way" is to keep DOM manipulation out of the controller, and to use dependency injection to make sure everything is testable. Obviously the way you illustrated above would be hard to test, and puts some DOM manipulation in the controller.

我想我会做什么，以获得DOM操作出来的控制器是用一个指令：

I guess what I would do to get the DOM manipulation out of the controller is use a directive:

一个简单的指令来配合你的对话公开征集到一个点击一个元素：

A simple directive to tie your dialog open call to a click on an element:

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

而在标记了它会像这样被使用：

And in mark up it would be used like so:

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

现在，这显然是非常基本的。你可以得到这个，如果你想提前pretty，在对话框中添加了不同的选择的附加属性。

Now, this is obviously very basic. You could get pretty advanced with this if you wanted to, adding additional attributes for different options in the dialog.

您可以更进一步，并添加打开的对话​​框为您服务，让您可以注入到你的控制器，甚至是你的指令，并获得该呼叫离开那里的方式。例如：

You could go even further and add a Service that opened the dialog for you, so you could inject it into your controller or even your directive, and get the call out of there that way. For example:

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

在这里，它是在使用。这似乎愚蠢的，因为它本质上是一回事。但是，这主要是因为它是一个非常简单的例子。但它至少利用DI并测试。

And here it is in use. It seems silly because it's essentially the same thing. But that's mostly because it's a very simplistic example. But it at least leverages DI and is testable.

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

总之。我希望这一切可以帮助你决定​​要采取什么样的路径。有一千种方式来做到这一点。 正确的方法是什么工作，可以让你做任何你需要做的（测试或其他任何东西），而且易于维护。

Anyhow. I hope all of that helps you decide what path you want to take. There are a thousand ways to do this. The "right" way is whatever works, allows you to do whatever you need to do (testing or anything else), and is easy to maintain.

这篇关于什么是从角打开一个jQuery对话框的最佳做法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！