wake-up-neo.net

So übergeben Sie Formulardaten von der Ui-Bootstrap-Modalansicht an

Ich erstelle eine Webapp und möchte eine Option zum Hinzufügen von Freunden implementieren. Ich habe die Seite "Freund hinzufügen" als Modal mit einem Texteingabefeld erstellt. Ich möchte dies testen, indem ich die Eingaben auf meiner Ansichtsseite anzeigen lasse. Wie zeige ich diese Daten auf meiner Ansichtsseite an?

Hier ist was ich momentan habe

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>

meine JavaScript-Datei:

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

15
user2016462

Auflösen - plunkr

Sie können die modalInstance-Eigenschaft von resolve verwenden. Dies dient als Verbindung zwischen der modalen Instanz und dem übergeordneten Controller.

Sie injizieren das Objekt in die Variable ModalInstanceController und ordnen es dem Bereich Ihrer modalen Instanz zu.

Die Bootstraps-Auflösung von UI funktioniert genauso wie die von ngRouter. Wenn also aus irgendeinem Grund resolve ein Objekt nicht auflösen kann, wird der Modal nicht geöffnet.

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

Anwendungsbereich - plunkr

Eine alternative und wohl einfachere Methode wäre die Übergabe des Elternbereichs in den Modalmodus. Beachten Sie, dass dies derzeit nicht funktioniert, wenn Sie die controllerAs-Syntax auf dem übergeordneten Controller verwenden.

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

Ich würde vorschlagen, das Versprechen aus dem Ergebnis zu verwenden, um den Wert stattdessen auf die Variablen Ihres Controllers festzulegen. Das "Auflösen" aus meinem Verständnis ist, die Steuerungsvariable an den Dialog zu übergeben, um ihn innerhalb des Dialogs zu verwenden, und nicht direkt geändert werden. In Ihrem Codebeispiel wird das Ergebnis, das Sie in $ modalInstance.close () an modalInstance.result.then () gesetzt haben, übergeben. Mit anderen Worten, die Zeilen 18 und 19 werden wie folgt geändert:

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

Um den Code ein wenig zu verbessern, können Sie tatsächlich das gesamte Benutzerobjekt übergeben, um weitere Attribute wie E-Mail, Adresse usw. zu Ihrem Benutzerobjekt hinzuzufügen. Ich hatte ein Beispiel unter http://plnkr.co/edit/oztYRNrCRlF1Pw289i1M?p=preview erstellt. 

1
barryku