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