AngularUI模式为可拖动和可调整大小 [英] AngularUI modal to be draggable and resizable
问题描述
我有包裹在一个指令的angularUi模式窗口：
I have an angularUi modal window wrapped in a directive:
HTML
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="main.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div my-modal="{ data: 'test2'}">test2</div>
</body>
</html>
JavaScript的：
javascript:
angular.module('plunker', ['ui.bootstrap', 'myModal']);
angular.module("myModal", []).directive("myModal", function ($modal) {
"use strict";
return {
template: '<div ng-click="clickMe(rowData)" ng-transclude></div>',
replace: true,
transclude: true,
scope: {
rowData: '&myModal'
},
link: function (scope, element, attrs) {
scope.clickMe = function () {
$modal.open({
template: "<div>Created By:" + scope.rowData().data + "</div>"
+ "<div class=\"modal-footer\">"
+ "<button class=\"btn btn-primary\" ng-click=\"ok()\">OK</button>"
+ "<button class=\"btn btn-warning\" ng-click=\"cancel()\">Cancel</button>"
+ "</div>",
controller: function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close({ test: "test"});
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
});
}
}
};
});
plunker：<一href=\"http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=$p$pview\">http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=$p$pview
我要让模态可拖动和可调整大小。我搜索通过互联网，并能够找到实现拖动以下解决方案：
I want to make the modal draggable and resizable. I searched through the internet and was able to find the following solution for implementing draggable:
http://plnkr.co/edit/jHS4SJ?p=$p$pview
这是最重要的部分：
app.directive('dragable', function(){
return {
restrict: 'A',
link : function(scope,elem,attr){
$(elem).draggable();
}
}
});
但无法使其与我的示例工作。有人可以帮助我？我不知道是否有可能使用jQueryUI的模式裹着一条指令（而不是引导）？我不是在JavaScript的很好，会很greatefull与这两个选项的任何工作示例。谢谢
but was not able to make it work with my example. Can someone help me with this? I wonder is it possible to use jqueryui modal wrapped in a directive (instead of bootstrap) ? I am not very good at javascript and will be very greatefull for any working example with both options. Thanks
编辑：
我添加jQueryUI的参考，并设法使该模式可拖动加入这一行：
I added jqueryui reference and managed to make the modal draggable by adding this line:
$(".modal-dialog").draggable();
问题是，我不知道什么时候加入这行。在那一刻我已经在取消方法添加这个（这只是为了工作）：
The problem is that I am not sure when to add this line. In the moment I have added this in the cancel method (just to make it work):
$ scope.cancel =功能（）{
$（模式 - 对话），可拖动（）;
};
$scope.cancel = function () { $(".modal-dialog").draggable(); };
因此，模态打开时我需要调用取消才把模式可拖动。如果我把它叫做早些时候.modal-对话框不揭掉存在。建议？
So when the modal is opened I need to call cancel and only then the modal is draggable. If I call it earlier the .modal-dialog does not yer exist. Suggestions?
更新plunker：
<一href=\"http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=$p$pview\">http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=$p$pview
我失去了一些东西很少，someome能提供工作的例子？
I am missing something little, can someome provide working example ?
推荐答案
如果你不想修改内置模板，您可以编写针对指令 modalWindow
If you don't want to modify built-in templates you can write a directive that targets modalWindow:
.directive('modalWindow', function(){
return {
restrict: 'EA',
link: function(scope, element) {
element.draggable();
}
}
});
请注意，您必须同时加载jQuery和jQuery用户界面的前的AngularJS脚本。
Please note that you will have to load both jQuery and jQuery UI before AngularJS scripts.
注意：另外请记住，角UI的新版本自举已经与UIB，所以modalWindow变成uibModalWindow与感谢@valepu
NOTE: Also keep in mind that newer versions of Angular UI bootstrap have been prefixed with "uib" so "modalWindow" becomes "uibModalWindow" with thanks to @valepu
这篇关于AngularUI模式为可拖动和可调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
