从角度打开jquery对话框的最佳实践是什么?

Heres the html:

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

And here's the js:

这是js:

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

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.

这是最好的方法吗?似乎有更好的方法可以在不访问DOM的情况下打开它，但是我不确定我该怎么做。上面的代码是有效的，我只是想知道这是不是我应该做的事情。任何输入都是受欢迎的。

1 个解决方案

#1

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

“最佳实践”在这里是模糊的。如果它是可读的，并且可以运行，那么在我看来，你已经达到90%了，而且它可能还不错。

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操作排除在控制器之外，并使用依赖注入来确保一切都是可测试的。显然，上面所示的方法很难进行测试，并在控制器中放置一些DOM操作。

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

我想我要做的是从控制器中取出DOM操作的是使用指令:

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:

在mark up中可以这样使用:

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

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

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.

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

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.

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

#1