從角度模態服務獲取數據

Question

第一類提問者，長時間閱讀器。新手到Angular。

我正在嘗試爲展開文本框創建彈出窗口模式。 （如果您曾經處理過Access，請考慮Shift F2）。所以，我有一個使用ng-model進行雙向綁定的多個文本框。我想用<textarea>打開一個模式，這樣用戶可以輸入（並看到）不僅僅是一個簡單的文本框。

目前綁定到每個字段中的數據將正確地打開到在彈出的文本區域（TO模態傳遞數據）。但是，如何將數據恢復到原始形式並進入正確的領域？

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

在這方式，您可以使用模式對話框中的屬性名稱爲輸入提供標籤，並以原始形式填充輸入。