heres的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，但我不知道我会怎么去。上面的代码工作，我只是想知道是否这是我应该去这样做的方式。欢迎任何输入。
解决方法
“最佳实践”在这里模糊的地方。如果它可读，它的工作，那么你是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');
};
});
无论如何。我希望所有这些都能帮助你决定你想要走什么路径。有一千种方法来做到这一点。 “正确的”方式是什么工作，允许你做任何你需要做的事情(测试或任何其他)，并且易于维护。
