Mdb*_*Mdb 20 jquery-ui modal-dialog angularjs angular-ui-bootstrap
我有一个包含在指令中的angularUi模态窗口:
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的:
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
我想让模态可拖动和可调整大小.我通过互联网搜索,并找到了以下解决方案来实现draggable:
http://plnkr.co/edit/jHS4SJ?p=preview
这是重要的部分:
app.directive('dragable', function(){
return {
restrict: 'A',
link : function(scope,elem,attr){
$(elem).draggable();
}
}
});
但是无法使它与我的例子一起工作.有人可以帮我弄这个吗？我想知道是否可以使用jqueryui模式包装在一个指令(而不是bootstrap)？我不是很擅长javascript,并且对于任何两个选项的工作示例都非常有用.谢谢
编辑:
我添加了jqueryui引用并设法通过添加以下行来使模式可拖动:
$(".modal-dialog").draggable();
问题是我不确定何时添加此行.目前我已经在cancel方法中添加了这个(只是为了让它工作):
$ scope.cancel = function(){$(".modal-dialog").draggable(); };
因此,当模态打开时,我需要调用取消,然后只有模态是可拖动的.如果我之前调用它,那么.modal-dialog就不存在了.建议？
更新的plunker:http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview
我遗漏了一些东西,有些人可以提供工作实例吗？
squ*_*hel 16
我已经创建了一个本机指令来使模态可拖动.你只需要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);
});
});
}
}
});
如果您不想修改内置模板,可以编写一个目标指令modalWindow:
.directive('modalWindow', function(){
return {
restrict: 'EA',
link: function(scope, element) {
element.draggable();
}
}
});
请注意,您必须在 AngularJS脚本之前加载jQuery和jQuery UI .
注意:另请注意,较新版本的Angular UI引导程序已添加前缀"uib",因此"modalWindow"变为"uibModalWindow",感谢@valepu
我将上面两个答案结合起来,使我的模态可拖动.
.directive('modalWindow', function(){
return {
restrict: 'EA',
link: function(scope, element) {
$(".modal-dialog").draggable();
}
}
});
| 归档时间： |
|
| 查看次数： |
35666 次 |
| 最近记录： |