AngularUI modal pour être déplaçable et redimensionnable

J'ai un angularUi fenêtre modale enveloppé dans une 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:

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

Je veux faire de la modale déplaçable et redimensionnable. J'ai cherché par le biais de l'internet et a été en mesure de trouver la solution suivante pour la mise en œuvre de déplaçable:

http://plnkr.co/edit/jHS4SJ?p=preview

C'est la partie importante:

app.directive('dragable', function(){   
  return {
    restrict: 'A',
    link : function(scope,elem,attr){
      $(elem).draggable();
    }
  }  
});

mais n'a pas été capable de le faire fonctionner avec mon exemple. Quelqu'un peut-il m'aider? Je me demande est-il possible d'utiliser jqueryui modal enveloppé dans une directive (au lieu de "bootstrap") ? Je ne suis pas très bon en javascript et sera très greatefull pour n'importe quel exemple de travail avec les deux options. Grâce

EDIT:

J'ai ajouté jqueryui de référence et a réussi à faire le modal déplaçable en ajoutant cette ligne:

 $(".modal-dialog").draggable();

Le problème est que je ne suis pas sûr de quand ajouter cette ligne. En ce moment, j'ai ajouté ceci dans la méthode cancel (juste pour le faire fonctionner):

$champ d'application.annuler = function () {
$(".modale de dialogue").draggable();
};

Ainsi, lorsque le modal est ouvert j'ai besoin d'appeler annuler et seulement alors, le modal est déplaçable. Si je l'appelle le plus tôt .modale de dialogue n'est pas yer existent. Des Suggestions?

mis à jour plunker:
http://plnkr.co/edit/yzxtWwZQdq94Tagdiswa?p=preview

Je suis absent quelque chose de petit, peut someome fournir de travail exemple ?

Vous devez importer jquery dans votre code, que $() est reconnu par jQuery plutôt que d'angularjs

InformationsquelleAutor Mdb | 2014-03-05

16

J'ai créé un natif de la directive pour faire le modal déplaçable. Vous avez seulement besoin d'AngularJs et de jQuery. La Directive utilise le "modal-boîte de dialogue" classe à partir de l'Interface utilisateur-modal Bootstrap et vous ne pouvez déplacer le modal dans l'en-tête.
```
.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);
            });
        });    
     }
  }  
});
```
- où déclarer cette directive? Cela ne fonctionne pas: <div class="modal-header" modal-dialog> <span class="modal-title">Some Title</span> </div>
- vous n'avez pas à déclarer la directive suffit de l'enregistrer dans votre projet et lorsque vous utilisez l'interface utilisateur-bootstrap modals il fonctionne, tout simplement parce que l'interface utilisateur-modal bootstrap a le "modal-boîte de dialogue" définir ses propres dans le "fond". Lorsque vous avez un travail par défaut de l'interface utilisateur-modal bootstrap alors vous n'avez qu'à inscrire cette directive dans votre projet.
- Merci beaucoup, cette solution a fonctionné pour moi. J'ai essayé un couple de d'autres, ils ne fonctionnent pas à 100% correctement.
- Bonne solution, mais ... il fait usage d'ECMAscript 6 de la syntaxe. Dans mon cas, il a cassé la génération de pdf de pages web par wkhtmltopdf.org qui est basé sur Webkit (QtWebKit) qui semble ne pas supporter ECMAscript 6. La question est assez simple à corriger en remplaçant tous les 3 occurrences de "(événement) => { ... } " par " function(event) {...}', mais c'était difficile à trouver ...
- cette réponse doit être accepté comme solution. Fonctionne parfaitement.
InformationsquelleAutor squadwuschel
9

Si vous ne voulez pas modifier les modèles intégrés, vous pouvez rédiger une directive qui cible modalWindow:
```
.directive('modalWindow', function(){
    return {
      restrict: 'EA',
      link: function(scope, element) {
        element.draggable();
      }
    }  
  });
```
Veuillez noter que vous devrez charger jQuery et jQuery UI avant AngularJS scripts.

NOTE: Aussi garder à l'esprit que les nouvelles versions de l'Angulaire de l'INTERFACE utilisateur de bootstrap ont été préfixés par "uib" donc "modalWindow" devient "uibModalWindow" merci à @valepu
- Le natif Angulaire draggable mise en œuvre aussi le travail? Je n'ai pas été en mesure de l'obtenir pour fonctionner avec modal.
- Vous avez une erreur dans votre réponse @pkoziowski.opensource
- il doit être "de l'élément.draggable()". Aussi garder à l'esprit que les nouvelles versions de l'Angulaire de l'INTERFACE utilisateur de bootstrap ont été préfixés par "uib" donc "modalWindow" devient "uibModalWindow"
InformationsquelleAutor pkozlowski.opensource

J'ai combiné les deux réponses ci-dessus, et fait mon modal déplaçables.

.directive('modalWindow', function(){
  return {
    restrict: 'EA',
    link: function(scope, element) {
      $(".modal-dialog").draggable();
    }
  }  
});

InformationsquelleAutor Manas

Angulaire de l'INTERFACE utilisateur modal avec un déplaçable barre de titre

REMARQUE: charger à la fois de jQuery et jQuery UI avant AngularJS scripts.

angular.module('xxApp')
    .directive('uibModalWindow', function () {
        return {
            restrict: 'EA',
            link: function (scope, element) {
                $('.modal-content').draggable({handle: ".modal-header"});
            }
        }
    });

InformationsquelleAutor dzcxzl

Merci pour vos exemples. Je peu poli de votre code et c'est mon résultat final. pour ma solution, il fonctionne parfaitement 🙂

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;
});

InformationsquelleAutor Ivanhoe

0

Essayez d'utiliser
```
$(elem).closest('div.modal-dialog').draggable();
```
en fonction de lien

InformationsquelleAutor Ramu

Vous devez vous connecter pour publier un commentaire.