Как передать данные формы из модального углового интерфейса начальной загрузки для просмотра

Я создаю веб-приложение и хочу добавить опцию добавления друзей. Я создал страницу добавления друга как модальное поле для ввода текста. Я хочу проверить это, отобразив ввод на моей странице просмотра. Как отобразить эти данные на странице просмотра?

Вот что у меня сейчас

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>

мой файл 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

Источник

2 ответа

Решение

Разрешить - планкр

Вы могли бы использовать modalInstance"s resolve имущество; это действует как связь между модальным экземпляром и родительским контроллером.

Вы вводите объект в ModalInstanceControllerи назначьте его в область действия вашего модального экземпляра.

UT Bootstraps разрешения работает точно так же, как ngRouter; как таковой, если по какой-либо причине resolve не может разрешить объект, модал не откроется.

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

Область применения - планкр

Альтернативным и, возможно, более простым методом будет передача родительской области модальной моде. Обратите внимание, что в настоящее время это не работает при использовании controllerAs синтаксис на родительском контроллере.

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  scope: $scope
});
Источник

Я бы предложил использовать обещание из результата, чтобы вместо этого установить значение для переменных вашего контроллера. "Разрешить", насколько я понимаю, для передачи переменной контроллера в диалог для использования внутри диалога, а не для непосредственного изменения. В вашем примере кода передача результата, который вы установили в $modalInstance.close() для modalInstance.result.then(), добьется цели. Другими словами, изменяя строки № 18 и № 19 следующим образом:

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

Чтобы немного улучшить код, вы можете фактически передать весь пользовательский объект, что позволит легко добавлять дополнительные атрибуты, такие как электронная почта, адрес и т. Д., В ваш пользовательский объект. Я должен был создать пример на http://plnkr.co/edit/oztYRNrCRlF1Pw289i1M?p=preview.

Источник
Другие вопросы по тегам