web-dev-qa-db-fra.com

Comment passer des données de formulaire de modal bootstrap d'interface utilisateur angulaire à la vue

Je crée une application Web et je souhaite implémenter une option permettant d'ajouter des amis. J'ai créé la page d'ajout d'amis en tant que modal avec un champ de saisie de texte. Je veux tester ceci en affichant l'entrée sur ma page d'affichage. Comment puis-je afficher ces données sur ma page d'affichage?

Voici ce que j'ai actuellement

index.html

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>

         <form name = "addFriendForm">
          <input ng-model = "user.name"class="form-control" type = "text" placeholder="Username" title=" Username" />
          {{ user.name }}
        </form>

        <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>
    </script>

    <button class="btn btn-default" ng-click="open()">Add Friend</button>
    <div> Username: {{user.name}}</div>
</div>

mon fichier JavaScript:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

  $scope.user = {name: ""}

  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function () {
      $scope.user.name = user.name;}, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
});

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance) {

  $scope.ok = function () {
    $modalInstance.close($scope.user.name);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

plunkr: http://plnkr.co/edit/JIoiNx47KXsY8aqbTUDS?p=preview

javascriptangularjsangular-ui-bootstrap-tab
15
user2016462

Résoudre - plunkr

Vous pouvez utiliser la propriété modalInstance 's resolve; cela sert de lien entre l'instance modale et le contrôleur parent.

Vous injectez l'objet dans la ModalInstanceController et l'assignez à la portée de votre instance modale.

La résolution de démarrage de l'interface utilisateur fonctionne exactement de la même manière que celle de ngRouter; En tant que tel, si pour une raison quelconque resolve ne peut pas résoudre un objet, le modal ne s'ouvrira pas.

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  resolve: {
    user: function() {
      return $scope.user;
    }
  }
});

Portée - plunkr

Une méthode alternative, et sans doute plus simple, consisterait à passer du domaine des parents au mode modal. Notez qu'actuellement, cela ne fonctionne pas lorsque vous utilisez la syntaxe controllerAs sur le contrôleur parent.

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  scope: $scope
});
20
Matt

Je suggérerais d'utiliser la promesse du résultat pour définir la valeur des variables de votre contrôleur à la place. D'après ma compréhension, la "résolution" consiste à transmettre la variable du contrôleur à la boîte de dialogue afin qu'elle puisse être utilisée à l'intérieur de la boîte de dialogue, sans modification directe. Dans votre exemple de code, le résultat que vous définissez dans $ modalInstance.close () à modalInstance.result.then () fera l'affaire. En d’autres termes, modifier les lignes 18 et 19 comme suit,

modalInstance.result.then(function (data) {
$scope.user.name = data;

Pour améliorer un peu le code, vous pouvez en réalité transmettre tout l'objet utilisateur afin de permettre d'ajouter facilement des attributs supplémentaires, tels que courrier électronique, adresse, etc., à votre objet utilisateur. J'ai eu créer un exemple à http://plnkr.co/edit/oztYRNrCRlF1Pw289i1M?p=preview . 

1
barryku