从角度模态服务获取数据答案

【问题标题】：getting data from angular modal service从角度模态服务获取数据
【发布时间】：2016-11-17 22:02:54
【问题描述】：

第一类提问者，长期阅读者。 Angular 的新手。

我正在尝试创建一个用于扩展文本框的弹出模式。（如果您曾经处理过 Access，请考虑 shift F2）。所以，我有一个带有多个文本框的表单，它利用 ng-model 进行双向绑定。我想用<textarea> 打开一个模态框，这样用户就可以输入（并查看）比简单文本框更多的内容。

目前绑定到每个字段的数据将正确打开到弹出窗口的文本区域（将数据传递给模式）。但是，如何将数据恢复为原始表单并输入正确的字段？

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);
    };
  }
]);

非常感谢！

【问题讨论】：

有了这么多代码，如果您提供指向 plunk 或 jsfiddle 的链接，您更有可能获得所需的帮助

标签： angularjs angularjs-directive angular-ui ng-bootstrap

【解决方案1】：

你快到了！在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());
  });
};

【讨论】：

【解决方案2】：

在mainForm.js中，声明获取结果的回调函数：

$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
      });
};

剩下的问题是openTextEditor 函数中的参数。
您应该有一种方法可以为原始形式的输入设置一个新值，但是当您在函数中传输一个字符串值时，修改该值会更加复杂。
您应该在openTextEditor 函数中传输一个参数，该参数允许检索属性值，而不仅仅是属性值。

例如，您可以在ng-click 函数中只传输属性名称：

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

在 JS 方面，您可以使用这样的属性名称：

 $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;
          });
    };

通过这种方式，您可以在模态对话框中使用属性名称来为输入赋予标签，并在原始表单中填充输入。

【讨论】：