Comment passer des données d'un formulaire dans angulaire ui bootstrap modal de vue

Je suis de la création d'une webapp et je veux le mettre en œuvre une option pour ajouter des amis. J'ai créé le ajouter un ami la page comme un modal avec un champ de saisie de texte. Je veux tester ce, par l'affichage de 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

OriginalL'auteur user2016462 | 2014-10-26

  1. 20

    Résoudre - plunkr

    Vous pourriez faire usage de modalInstance's resolve de la propriété; ce qui fait le lien entre le modal instance et le contrôleur de parent.

    Vous injecter de l'objet dans le ModalInstanceController, et de l'attribuer à la portée de votre modal instance.

    De l'INTERFACE utilisateur Démarre résoudre fonctionne exactement le même que ngRouter; en tant que tel si, pour quelque raison que ce soit resolve ne peut pas résoudre un objet, le modal ne s'ouvre pas.

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

    Champ d'application - plunkr

    Une alternative, et sans doute la méthode la plus simple serait de passer chez les parents de la portée à la modale. Il faut noter que cela ne fonctionne pas lors de l'utilisation de controllerAs de syntaxe sur le contrôleur de parent.

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

    OriginalL'auteur Matt

  2. 1

    Je voudrais suggérer à l'aide de la promesse, ce qui est le résultat de définir la valeur à votre contrôleur de variables à la place. Le "résoudre" à partir de ma compréhension est pour le passage du contrôleur de la variable de la boîte de dialogue de l'aide à l'intérieur de la boîte de dialogue, de ne pas être modifié directement. Dans votre exemple de code, en passant résultat que vous définissez dans $modalInstance.close() pour modalInstance.résultat.alors() fera l'affaire. En d'autres termes, la modification de la ligne #18 et #19 à la suivante,

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

    Pour améliorer un peu le code, vous pouvez passer à l'ensemble de l'objet utilisateur pour permettre l'ajout d'autres attributs tels que l'email, adresse, etc. pour votre objet utilisateur facilement. J'avais créer un exemple à http://plnkr.co/edit/oztYRNrCRlF1Pw289i1M?p=preview.

    OriginalL'auteur barryku