从角度打开 jquery 对话框的最佳实践是什么? [英] What is the best practice for opening a jquery dialog from angular?
问题描述
这里是html:
<a ng-click="open()">打开对话框</a><div id="modal-to-open" title="我的标题" ui-jq="dialog" ui-options="{width: 350, autoOpen: false, modal: true}">对话文本这是js:
function MyCtrl($scope){$scope.open = 函数 () {$('#modal-to-open').dialog('open');}}这是最好的方法吗?似乎有一种更好的方法可以在不访问 DOM 的情况下打开它，但我不确定我会怎么做.上面的代码有效，我只是想知道这是否是我应该这样做的方式.欢迎任何意见.
这里的最佳实践"是模糊的.如果它可读且有效，那么你就 90% 在那里，IMO，它可能没问题.
也就是说，角度方式"是将 DOM 操作排除在控制器之外，并使用依赖注入来确保一切都是可测试的.显然，您上面说明的方式很难测试，并且会在控制器中进行一些 DOM 操作.
我想从控制器中获取 DOM 操作的方法是使用指令:
一个简单的指令，将你的对话框打开调用与元素上的点击联系起来:
app.directive('openDialog', function(){返回 {限制:'A'，链接:功能(范围，元素，属性，ctrl){var dialogId = '#' + attr.openDialog;elem.bind('click', function(e) {$(dialogId).dialog('open');});}};});在标记中，它会像这样使用:
现在，这显然是非常基本的.如果您愿意，您可以在这方面做得非常先进，为对话框中的不同选项添加其他属性.
你可以更进一步，添加一个为你打开对话框的服务，这样你就可以将它注入你的控制器甚至你的指令，然后通过这种方式调用.例如:
app.factory('dialogService', [function() {返回 {打开:功能(元素ID){$(elementId).dialog('open');}};}]);这里正在使用.这看起来很愚蠢，因为它本质上是一样的.但这主要是因为这是一个非常简单的例子.但它至少利用了 DI 并且是可测试的.
app.controller('MyCtrl', function($scope, dialogService) {$scope.open = 函数 () {dialogService.open('#modal-to-open');};});无论如何.我希望所有这些都可以帮助您决定要走的道路.有一千种方法可以做到这一点.正确"的方式是任何有效的方法，允许您做任何您需要做的事情(测试或其他任何事情)，并且易于维护.
Heres the 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:
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.
"Best practice" is fuzzy ground here. If it's readable and it works, then you're 90% there, IMO, and it's probably fine.
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.
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>
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.
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屋！
