renvoyer des données à partir du service de dialogue modal Angularjs

Question

Je suis relativement nouveau sur AngularJS et j'ai un problème avec le retour des données d'un service de dialogue modal.En gros, j'ai copié le service de Dan Wahlin http://weblogs.asp.net/dwahlin/archive/2013/09/18/building-an-angularjs-modal-service.aspx et je l'appelle depuis mon contrôleur.

myApp.controller('MyController', function($scope, ModalService) {
    window.scope = $scope;
    $scope.mydata = {name: ""};

    $scope.showModal = function () {

        var modalOptions    = {
            closeButtonText: 'Cancel',
            actionButtonText: 'Save',
            headerText: 'Save Dialog'
        }

        ModalService.showModal({}, modalOptions).then(function (result) {

        });
    }

});

Ensuite j'ai mon partiel comme ceci :

<div class="modal-header">
    <h3>{{modalOptions.headerText}}</h3>
</div>
<form ng-submit="modalOptions.submit()">
<div class="modal-body">
    <label>Name</label>
    <input type="text" data-ng-model="mydata.name">
</div>
<div class="modal-footer">
    <button type="button" class="btn" data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>
    <button type="submit" class="btn btn-primary">{{modalOptions.actionButtonText}}</button>
</div>

Ce modal est invoqué comme ceci :

<button class="btn btn-primary hidden pull-right" id="save" data-ng-click="showModal()">Save</button>

Ma question est donc de savoir comment récupérer la valeur du champ de nom au contrôleur ?J'ai regardé partout sur le Web et tous les exemples ont la fonction qui ouvre le modal résidant à l'intérieur du contrôleur, ce qui rend les choses beaucoup plus faciles car $scope du contrôleur existe également dans la fonction qui ouvre le modal.

J'ai essayé d'ajouter le code suivant à la fonction « show » du service mais cela n'a pas fonctionné.

    tempModalDefaults.resolve = function($scope) {
        mydata = function () {
            return $scope.mydata;
        }
    }

Merci

P.S.J'ai renommé modalService en ModalService dans mon code, ce n'est donc pas une faute de frappe.Le modal s'ouvre et se ferme comme il se doit, je ne peux tout simplement pas transmettre la valeur du champ au contrôleur.

Answer 1

Dans votre bouton, ajoutez data-ng-click="modalOptions.ok(mydata)"

<button type="submit" class="btn btn-primary" data-ng-click="modalOptions.ok(mydata)">{{modalOptions.actionButtonText}}</button>

Et vous pouvez l'obtenir depuis :

ModalService.showModal({}, modalOptions).then(function (result) {
              console.log(result.name);
        });

DÉMO

Si vous souhaitez utiliser modalOptions.submit fonction, vous devez changer un peu votre code

Dans votre HTML, transmettez le mydata à modalOptions.submit fonction:

<form ng-submit="modalOptions.submit(mydata)">

Votre modèle de service, remplacez-le dans le show fonction:

return $modal.open(tempModalDefaults); //remove the .result

Votre contrôleur :

$scope.showModal = function () {

        var modalOptions    = {
            closeButtonText: 'Cancel',
            actionButtonText: 'Save',
            headerText: 'Save Dialog',
            submit:function(result){
              $modalInstance.close(result);
            }
        }

        var $modalInstance = ModalService.showModal({}, modalOptions);
        $modalInstance.result.then(function (result) {
             console.log(result.name);
        });
    }

DÉMO