web-dev-qa-db-fra.com

renvoi de données du service de dialogue modal angularjs

Je suis assez nouveau sur AngularJS et j'ai un problème avec le retour des données d'un service de dialogue modal. Fondamentalement, 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 ça:

<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 appelé 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 sur le contrôleur? J'ai regardé partout sur le Web et tous les exemples ont la fonction qui ouvre le modal réside à l'intérieur du contrôleur, ce qui le rend beaucoup plus facile 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" dans le 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, donc ce n'est 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.

javascriptangularjstwitter-bootstrapmodal-dialogangular-ui-bootstrap
17
petermk

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 auprès de:

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 code HTML, passez le mydata à modalOptions.submit une fonction:

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

Votre Model Service, remplacez dans la fonction show:

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

38
Khanh TO