I have an angularUi modal window wrapped in a directive:
我有一个包含在指令中的angularUi模态窗口：
html:
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: http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview
plunker：http：//plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview
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:
我想让模态可拖动和可调整大小。我通过互联网搜索，并找到了以下解决方案来实现draggable：
http://plnkr.co/edit/jHS4SJ?p=preview
http://plnkr.co/edit/jHS4SJ?p=preview
This is the important part:
这是重要的部分：
app.directive('dragable', function(){
return {
restrict: 'A',
link : function(scope,elem,attr){
$(elem).draggable();
}
}
});
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模式包装在一个指令（而不是bootstrap）？我不是很擅长javascript，对于任何有两个选项的工作示例都会非常有用。谢谢
EDIT:
编辑：
I added jqueryui reference and managed to make the modal draggable by adding this line:
我添加了jqueryui引用并设法通过添加以下行来使模式可拖动：
$(".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):
问题是我不确定何时添加此行。目前我已经在cancel方法中添加了这个（只是为了让它工作）：
$scope.cancel = function () { $(".modal-dialog").draggable(); };
$ scope.cancel = function（）{$（“。modal-dialog”）。draggable（）; };
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?
因此，当模态打开时，我需要调用取消，然后只有模态可拖动。如果我之前调用它，那么.modal-dialog就不存在了。建议？
updated plunker: http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview
更新的plunker：http：//plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview
I am missing something little, can someome provide working example ?
我遗漏了一些东西，有些人可以提供工作实例吗？
6 个解决方案
#1
12
I've created a native directive to make the modal draggable. You only need AngularJs and jQuery. The Directive uses the "modal-dialog" class from Ui-Bootstrap modal and you can only move the modal in the header.
我已经创建了一个本机指令来使模态可拖动。你只需要AngularJs和jQuery。该指令使用Ui-Bootstrap模态中的“模态对话框”类，您只能在标题中移动模态。
.directive('modalDialog', function(){
return {
restrict: 'AC',
link: function($scope, element) {
var draggableStr = "draggableModal";
var header = $(".modal-header", element);
header.on('mousedown', (mouseDownEvent) => {
var modalDialog = element;
var offset = header.offset();
modalDialog.addClass(draggableStr).parents().on('mousemove', (mouseMoveEvent) => {
$("." + draggableStr, modalDialog.parents()).offset({
top: mouseMoveEvent.pageY - (mouseDownEvent.pageY - offset.top),
left: mouseMoveEvent.pageX - (mouseDownEvent.pageX - offset.left)
});
}).on('mouseup', () => {
modalDialog.removeClass(draggableStr);
});
});
}
}
});
#2
9
If you don't want to modify built-in templates you can write a directive that targets modalWindow:
如果您不想修改内置模板，可以编写一个以modalWindow为目标的指令：
.directive('modalWindow', function(){
return {
restrict: 'EA',
link: function(scope, element) {
element.draggable();
}
}
});
Please note that you will have to load both jQuery and jQuery UI before AngularJS scripts.
请注意，您必须在AngularJS脚本之前加载jQuery和jQuery UI。
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
注意：另请注意，较新版本的Angular UI引导程序已添加前缀“uib”，因此“modalWindow”变为“uibModalWindow”，感谢@valepu
#3
5
I combined the two above answers and made my modal dragable.
我将上面两个答案结合起来，使我的模态可拖动。
.directive('modalWindow', function(){
return {
restrict: 'EA',
link: function(scope, element) {
$(".modal-dialog").draggable();
}
}
});
#4
0
Thank you for your examples. I little bit polished your code and this is my final result. to my solution it works perfectly :-)
谢谢你的例子。我对你的代码进行了一些改进，这是我的最终结果。对我的解决方案它完美的工作:-)
HTML:
HTML：
<div class="draggableModal ui-widget-content">
<div class="modal-header">
...
</div>
</div>
angular.module('posProductsManager').directive('modalDialog', function () {
var definition = {
restrict: 'AC',
link: function ($scope, element) {
var draggableStr = "draggableModal";
var header = $(".modal-header", element);
var modalDialog = element;
var clickPosition = null;
var clickOffset = null;
header[0].addEventListener('mousedown', function (position) {
clickPosition = position;
clickOffset = position;
window.addEventListener('mouseup', mouseUpEvent);
window.addEventListener('mousemove', mouseMoveEvent);
});
function mouseUpEvent() {
clickPosition = null;
window.removeEventListener('mouseup', mouseUpEvent);
window.removeEventListener('mousemove', mouseMoveEvent);
}
function mouseMoveEvent(position) {
var offset = modalDialog.parents().offset();
$("." + draggableStr, modalDialog.parents()).offset({
left: clickPosition.pageX + (position.pageX - clickPosition.pageX) - clickOffset.offsetX,
top: clickPosition.pageY + (position.pageY - clickPosition.pageY) - clickOffset.offsetY,
});
clickPosition = position;
}
}
};
return definition;
});
#5
0
an Angular UI modal with a draggable title bar
具有可拖动标题栏的Angular UI模式
NOTE: have to load both jQuery and jQuery UI before AngularJS scripts.
注意：必须在AngularJS脚本之前加载jQuery和jQuery UI。
angular.module('xxApp')
.directive('uibModalWindow', function () {
return {
restrict: 'EA',
link: function (scope, element) {
$('.modal-content').draggable({handle: ".modal-header"});
}
}
});
#6
0
Try using
尝试使用
$(elem).closest('div.modal-dialog').draggable();
in link function
在链接功能
#1
12
I've created a native directive to make the modal draggable. You only need AngularJs and jQuery. The Directive uses the "modal-dialog" class from Ui-Bootstrap modal and you can only move the modal in the header.
我已经创建了一个本机指令来使模态可拖动。你只需要AngularJs和jQuery。该指令使用Ui-Bootstrap模态中的“模态对话框”类，您只能在标题中移动模态。
.directive('modalDialog', function(){
return {
restrict: 'AC',
link: function($scope, element) {
var draggableStr = "draggableModal";
var header = $(".modal-header", element);
header.on('mousedown', (mouseDownEvent) => {
var modalDialog = element;
var offset = header.offset();
modalDialog.addClass(draggableStr).parents().on('mousemove', (mouseMoveEvent) => {
$("." + draggableStr, modalDialog.parents()).offset({
top: mouseMoveEvent.pageY - (mouseDownEvent.pageY - offset.top),
left: mouseMoveEvent.pageX - (mouseDownEvent.pageX - offset.left)
});
}).on('mouseup', () => {
modalDialog.removeClass(draggableStr);
});
});
}
}
});
#2
9
If you don't want to modify built-in templates you can write a directive that targets modalWindow:
如果您不想修改内置模板，可以编写一个以modalWindow为目标的指令：
.directive('modalWindow', function(){
return {
restrict: 'EA',
link: function(scope, element) {
element.draggable();
}
}
});
Please note that you will have to load both jQuery and jQuery UI before AngularJS scripts.
请注意，您必须在AngularJS脚本之前加载jQuery和jQuery UI。
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
注意：另请注意，较新版本的Angular UI引导程序已添加前缀“uib”，因此“modalWindow”变为“uibModalWindow”，感谢@valepu
#3
5
I combined the two above answers and made my modal dragable.
我将上面两个答案结合起来，使我的模态可拖动。
.directive('modalWindow', function(){
return {
restrict: 'EA',
link: function(scope, element) {
$(".modal-dialog").draggable();
}
}
});
#4
0
Thank you for your examples. I little bit polished your code and this is my final result. to my solution it works perfectly :-)
谢谢你的例子。我对你的代码进行了一些改进，这是我的最终结果。对我的解决方案它完美的工作:-)
HTML:
HTML：
<div class="draggableModal ui-widget-content">
<div class="modal-header">
...
</div>
</div>
angular.module('posProductsManager').directive('modalDialog', function () {
var definition = {
restrict: 'AC',
link: function ($scope, element) {
var draggableStr = "draggableModal";
var header = $(".modal-header", element);
var modalDialog = element;
var clickPosition = null;
var clickOffset = null;
header[0].addEventListener('mousedown', function (position) {
clickPosition = position;
clickOffset = position;
window.addEventListener('mouseup', mouseUpEvent);
window.addEventListener('mousemove', mouseMoveEvent);
});
function mouseUpEvent() {
clickPosition = null;
window.removeEventListener('mouseup', mouseUpEvent);
window.removeEventListener('mousemove', mouseMoveEvent);
}
function mouseMoveEvent(position) {
var offset = modalDialog.parents().offset();
$("." + draggableStr, modalDialog.parents()).offset({
left: clickPosition.pageX + (position.pageX - clickPosition.pageX) - clickOffset.offsetX,
top: clickPosition.pageY + (position.pageY - clickPosition.pageY) - clickOffset.offsetY,
});
clickPosition = position;
}
}
};
return definition;
});
#5
0
an Angular UI modal with a draggable title bar
具有可拖动标题栏的Angular UI模式
NOTE: have to load both jQuery and jQuery UI before AngularJS scripts.
注意：必须在AngularJS脚本之前加载jQuery和jQuery UI。
angular.module('xxApp')
.directive('uibModalWindow', function () {
return {
restrict: 'EA',
link: function (scope, element) {
$('.modal-content').draggable({handle: ".modal-header"});
}
}
});
#6
0
Try using
尝试使用
$(elem).closest('div.modal-dialog').draggable();
in link function
在链接功能