getting data from angular modal service

Question

First type questioner, long time reader. Newbie to Angular.

I am trying to create a popup modal for expanding a text box. (If you have ever dealt with Access, think shift F2). So, I have a form with multiple text boxes which utilize ng-model for two-way binding. I want to open a modal with a <textarea> so the user can type (and see) more than a simple text box.

Currently the data that is bound to each field will open correctly into the textarea on the popup (Passing data TO the modal). However, how do I get the data back to my original form and into the correct field?

mainForm.cshtml

<div class="col-md-4">
  <button type="button" ng-click="openTextEditor(vm.firstName)">First Name</button>
  <input class="form-control" type="text" name="firstName" ng-class="{'edited':vm.firstName}" ng-model="vm.firstName">
</div>
<div class="col-md-4">
  <button type="button" ng-click="openTextEditor(vm.middleName)">Middle Name</button>
  <input class="form-control" type="text" name="middleName" ng-class="{'edited':vm.middleName}" ng-model="vm.middleName">
</div>
<div class="col-md-4">
  <button type="button" ng-click="openTextEditor(vm.lastName)">Last Name</button>
  <input class="form-control" type="text" name="lastName" ng-class="{'edited':vm.lastName}" ng-model="vm.lastName">
</div>

mainForm.js

$scope.openTextEditor = function(textValue) {
  $uibModal.open({
    templateUrl: '~/textEditorModal.cshtml',
    controller: 'textEditorModal as vm',
    backdrop: 'static',
    resolve: {
      textValue: function() {
        return textValue;
      }
    }
  });
};

textEditorModal.cshtml

<div>
  <div class="modal-header">
    <h4 class="modal-title">
</h4>
  </div>
  <div class="modal-body">
    <div busy-if="vm.loading">
      <form name="textEditor">
        <div class="input-group margin-bottom-10">
          <textarea id="textBox" type="text" class="form-control" cols="25" rows="7" placeholder="Type text here...." ng-model="vm.textValue" enter-key="vm.saveModal()"></textarea>
        </div>
      </form>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" ng-disabled="vm.saving" class="btn btn-default" ng-click="vm.cancelModal()">Cancel</button>
    <button type="submit" button-busy="vm.saving" class="btn btn-primary blue" ng-click="vm.saveModal()" ng-disabled="textEditor.$invalid"><i class="fa fa-save"></i> <span>Save</span></button>
  </div>
</div>

textEditorModal.js

appModule.controller('common.views.common.textEditorModal', [
  '$scope', '$uibModalInstance', 'textValue',
  function($scope, $uibModalInstance, textValue) {
    var vm = this;

    vm.loading = false;
    vm.textValue = textValue;

    vm.cancelModal = function() {
      $uibModalInstance.dismiss();
    };

    vm.saveModal = function() {
      vm.saving = true;
      $uibModalInstance.close(vm.textValue);
    };
  }
]);

Many thanks in advance!

With this much code, you're more likely to get the assistance you need if you provide a link to a plunk or jsfiddle — jbrown
– jbrown, Commented Nov 17, 2016 at 22:08

Pop-A-Stash · Accepted Answer · 2016-11-17 22:26:06Z

1

You are almost there! In mainForm.js:

$scope.openTextEditor = function(textValue) {
  var modalInstance = $uibModal.open({
    templateUrl: '~/textEditorModal.cshtml',
    controller: 'textEditorModal as vm',
    backdrop: 'static',
    resolve: {
      textValue: function() {
        return textValue;
      }
    }
  });

  modalInstance.result.then(function (savedText) {
    // when the modal is dismissed with the save button
    // do your thing with savedText
  }, function () {
    // when the modal is dismissed with the cancel button
    console.log('Modal dismissed at: ' + new Date());
  });
};

answered Nov 17, 2016 at 22:26

Pop-A-Stash

6,6975 gold badges30 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

davidxxx · Accepted Answer · 2016-11-17 23:06:22Z

In mainForm.js, declare the callback function to get the result :

$scope.openTextEditor = function(textValue) {
  $uibModal.open({
    templateUrl: '~/textEditorModal.cshtml',
    controller: 'textEditorModal as vm',
    backdrop: 'static',
    resolve: {
      textValue: function() {
        return textValue;
      }
    }
  })
    .result.then(function(returnedInput) {
                 // here is the problem
      });
};

The remaining problem is the param in the openTextEditor function.
You should have a way to set a new value to the input in the original form but as you transmit in the function a string value, it will be more complicated to modify the value.
You should transmit in the openTextEditor function a parameter which allows to retrieve the property to value and not only the value of the property.

For example, you could transmit only the property name in the ng-click function :

<div class="col-md-4">
  <button type="button" ng-click="openTextEditor('firstName)">First Name</button>
  <input class="form-control" type="text" name="firstName" ng-class="{'edited':vm.firstName}" ng-model="vm.firstName">
</div>

And in the JS side, you could use the property name like that :

 $scope.openTextEditor = function(propertyName) {
      $uibModal.open({
        templateUrl: '~/textEditorModal.cshtml',
        controller: 'textEditorModal as vm',
        backdrop: 'static',
        resolve: {
          propertyName: function() {
            return propertyName;
          }
        }
      })
        .result.then(function(returnedInput) {
                 vm[propertyName]=returnedInput;
          });
    };

In this way, you use the property name in the modal dialog to give a label to the input and a way to fill the input in the original form.

Collectives™ on Stack Overflow

getting data from angular modal service

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related