Question

第一类提问者，长时间读者。新手到Angular。

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

目前，绑定到每个字段的数据将在弹出窗口中正确打开到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);
    };
  }
]);

非常感谢提前！

Answer 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());
  });
};

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

通过这种方式，您可以使用模态对话框中的属性名称为输入提供标签，并以原始形式填充输入。

从角度模态服务获取数据

2 个答案: