AngularJSモーダルダイアログサービスからデータを返す
-
21-12-2019 - |
質問
私はAngularjsにはかなり新しいもので、モーダルダイアログサービスからデータを返すことに問題があります。基本的に、私はDan Wahlinのサービスをコピーしました .asp.net / dwahlin / archive / 2013/09/18 / building-an-angularjs-modal-service.aspx と私のコントローラからそれを呼び出しています。
myApp.controller('MyController', function($scope, ModalService) {
window.scope = $scope;
$scope.mydata = {name: ""};
$scope.showModal = function () {
var modalOptions = {
closeButtonText: 'Cancel',
actionButtonText: 'Save',
headerText: 'Save Dialog'
}
ModalService.showModal({}, modalOptions).then(function (result) {
});
}
});
.
それから私はそのような部分的なように私の部分を持っています:
<div class="modal-header">
<h3>{{modalOptions.headerText}}</h3>
</div>
<form ng-submit="modalOptions.submit()">
<div class="modal-body">
<label>Name</label>
<input type="text" data-ng-model="mydata.name">
</div>
<div class="modal-footer">
<button type="button" class="btn" data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>
<button type="submit" class="btn btn-primary">{{modalOptions.actionButtonText}}</button>
</div>
.
このモーダルは次のように呼び出されています:
<button class="btn btn-primary hidden pull-right" id="save" data-ng-click="showModal()">Save</button>
.
だから私の質問は、名前フィールドの値をコントローラに戻す方法ですか?私はWeb全体を見て、すべての例にコントローラ内のモーダル存在を開く関数があります。これは、コントローラからの$ scopeもモーダルを開く関数にも存在します。
私はサービス内の 'show'関数に次のコードを追加しましたが、うまくいきませんでした。
tempModalDefaults.resolve = function($scope) {
mydata = function () {
return $scope.mydata;
}
}
.
ありがとう
p.S。 ModalServiceをコードでModalServiceに変更したため、Typoではありません。モーダルは開き、それが必要なときに閉じて、フィールドの値をコントローラに戻すことはできません。
解決
ボタンで、data-ng-click="modalOptions.ok(mydata)"
<button type="submit" class="btn btn-primary" data-ng-click="modalOptions.ok(mydata)">{{modalOptions.actionButtonText}}</button>
.
そしてあなたはそれを得ることができます:
ModalService.showModal({}, modalOptions).then(function (result) {
console.log(result.name);
});
.
modalOptions.submit
関数を使用する場合は、コードを少し
HTMLでは、mydata
をmodalOptions.submit
関数に渡します。
<form ng-submit="modalOptions.submit(mydata)">
.
モデルサービス、show
関数に置き換えます。
return $modal.open(tempModalDefaults); //remove the .result
.
あなたのコントローラー:
$scope.showModal = function () {
var modalOptions = {
closeButtonText: 'Cancel',
actionButtonText: 'Save',
headerText: 'Save Dialog',
submit:function(result){
$modalInstance.close(result);
}
}
var $modalInstance = ModalService.showModal({}, modalOptions);
$modalInstance.result.then(function (result) {
console.log(result.name);
});
}
.
所属していません StackOverflow