У меня есть модальное окно 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
Я хочу сделать modal draggable и resizable. Я искал через Интернет и смог найти следующее решение для реализации draggable:
http://plnkr.co/edit/jHS4SJ?p=preview
Это важная часть:
app.directive('dragable', function(){
return {
restrict: 'A',
link : function(scope,elem,attr){
$(elem).draggable();
}
}
});
но не смог заставить его работать с моим примером. Может кто-то помочь мне с этим? Интересно, можно ли использовать jqueryui modal в директиве (вместо бутстрапа)? Я не очень хорошо разбираюсь в javascript и очень приветствую любой рабочий пример с обоими параметрами. Благодаря
EDIT:
Я добавил ссылку jqueryui и сумел сделать modal draggable, добавив эту строку:
$(".modal-dialog").draggable();
Проблема в том, что я не уверен, когда добавлять эту строку. В тот момент, когда я добавил это в методе отмены (просто для его работы):
$scope.cancel = function() { . $( "Модальная диалог" ) перетаскиваемая(); };
Итак, когда модаль открыт, мне нужно вызвать отмену, и только тогда модаль перетаскивается. Если я назову это раньше, то .modal-dialog не существует. Предложения?
обновленный плункер: http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview
Мне не хватает чего-то маленького, может ли кто-нибудь предоставить рабочий пример?