AngularUI modalne do przeciągania i upuszczania oraz zmiany rozmiaru
Mam okno modalne angularUi opakowane w dyrektywę:
html:
<!doctype html>
<html ng-app="plunker">
<head>
<script src="[url=http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>]http://ajax.googleapis.com/aja ... gt%3B[/url]
<script src="[url=http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>]http://angular-ui.github.io/bo ... gt%3B[/url]
<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 </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>',
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 class=\"modal-footer\">"
+ "<button class=\"btn btn-primary\" ng-click=\"ok()\">OK</button>"
+ "<button class=\"btn btn-warning\" ng-click=\"cancel()\">Cancel</button>"
+ "",
controller: function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close({ test: "test"});
}; $scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
});
}
}
};
});plunker:
http://plnkr.co/edit/yzxtWwZQd ... eview
http://plnkr.co/edit/yzxtWwZQd ... eview
Chcę, aby modalne można było przeciągać i zmieniać ich rozmiar. Przeszukałem Internet i znalazłem następujące rozwiązanie do implementacji draggable:
http://plnkr.co/edit/jHS4SJ?p=preview
http://plnkr.co/edit/jHS4SJ?p=preview
To jest ważna część:
app.directive('dragable', function(){
return {
restrict: 'A',
link : function(scope,elem,attr){
$(elem).draggable();
}
}
});ale nie mogłem zmusić go do pracy na moim przykładzie. Czy ktoś może mi pomóc? Zastanawiam się, czy można użyć modalnego jqueryui opakowanego w dyrektywę (zamiast bootstrapu)? Nie jestem zbyt dobry w javascript i byłbym bardzo pomocny w przypadku każdego działającego przykładu z obiema opcjami. podziękować
EDIT:
Dodałem łącze jqueryui i udało mi się wykonać modalne przeciąganie i upuszczanie, dodając tę linię:
$(".modal-dialog").draggable();Problem w tym, że nie jestem pewien, kiedy dodać tę linię. W tej chwili dodałem This do metody anulowania (żeby to zadziałało):
$ scope.cancel = function () {
$ (". modalne okno dialogowe"). draggable ();
};
Kiedy więc modal jest otwarty, muszę wywołać anulowanie i dopiero wtedy można przeciągnąć modal. Jeśli zadzwonię wcześniej. okno dialogowe modalne nie istnieje. Propozycje?
zaktualizowany tłok:
http://plnkr.co/edit/yzxtWwZQd ... eview
http://plnkr.co/edit/yzxtWwZQd ... eview
Trochę mi czegoś brakuje, czy ktoś może podać działający przykład?
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
6 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
.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);
});
});
}
}
});
Anonimowy użytkownik
Potwierdzenie od:
.directive('modalWindow', function(){return {
restrict: 'EA',
link: function(scope, element) {
element.draggable();
}
}
});
Pamiętaj, że będziesz musiał pobrać zarówno interfejs użytkownika jQuery, jak i jQuery
z przodu
Skrypty AngularJS.
NOTE
: pamiętaj również, że nowsze wersje programu ładującego Angular UI mają przedrostek „uib”, dzięki czemu „modalWindow” staje się „uibModalWindow” dzięki @valepu
Anonimowy użytkownik
Potwierdzenie od:
.directive('modalWindow', function(){return {
restrict: 'EA',
link: function(scope, element) {
$(".modal-dialog").draggable();
}
}
});
Anonimowy użytkownik
Potwierdzenie od:
UWAGA: zarówno jQuery, jak i jQuery UI muszą zostać załadowane przed skryptami AngularJS.
angular.module('xxApp').directive('uibModalWindow', function () {
return {
restrict: 'EA',
link: function (scope, element) {
$('.modal-content').draggable({handle: ".modal-header"});
}
}
});
Anonimowy użytkownik
Potwierdzenie od:
HTML:
Anonimowy użytkownik
Potwierdzenie od:
$(elem).closest('div.modal-dialog').draggable();W funkcji komunikacji