如何在角度模态服务中将输入值传递给控制器
How to pass input value to controller in Angular Modal service
使用此角度模态服务:
app.service('modalService', ['$modal',
function ($modal) {
var modalDefaults = {
backdrop: true,
keyboard: true,
modalFade: true,
templateUrl: '/templates/modal.html'
};
var modalOptions = {
closeButtonText: 'Close',
actionButtonText: 'OK',
headerText: 'Proceed?',
bodyText: 'Perform this action?'
};
this.showModal = function (customModalDefaults, customModalOptions) {
if (!customModalDefaults) customModalDefaults = {};
customModalDefaults.backdrop = 'static';
return this.show(customModalDefaults, customModalOptions);
};
this.show = function (customModalDefaults, customModalOptions) {
//Create temp objects to work with since we're in a singleton service
var tempModalDefaults = {};
var tempModalOptions = {};
//Map angular-ui modal custom defaults to modal defaults defined in service
angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);
//Map modal.html $scope custom properties to defaults defined in service
angular.extend(tempModalOptions, modalOptions, customModalOptions);
if (!tempModalDefaults.controller) {
tempModalDefaults.controller = function ($scope, $modalInstance) {
$scope.modalOptions = tempModalOptions;
$scope.modalOptions.ok = function (result) {
$modalInstance.close(result);
};
$scope.modalOptions.close = function () {
$modalInstance.dismiss('cancel');
};
}
}
return $modal.open(tempModalDefaults).result;
};
}]);
我无法理解如何将值从模态(具有input
(传递到控制器。
这是我的模态:
<input type="text" class="form-control" id="{{modalOptions.inputName}}" name="{{modalOptions.inputName}}" data-ng-model="modalOptions.inputVal" data-ng-if="modalOptions.inputName" />
<button type="button" class="btn"
data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button>
<button class="btn btn-primary"
data-ng-click="modalOptions.ok();">{{modalOptions.actionButtonText}}</button>
控制器:
$scope.addTopic = function () {
var modalOptions = {
closeButtonText: 'Cancel',
actionButtonText: 'Create Topic',
inputName: 'topicName'
};
modalService.showModal({}, modalOptions).then(function (result) {
// I tried...
var input = $scope.inputName; // and...
input = result;
$log.log("Adding topic '" + input + "' to publication no " + $scope.publication.id);
});
}
因此,输入是modalOptions
中的一个选项,但是当用户输入值并单击"确定"时,不会向控制器发送任何内容。 $scope.inputName
返回undefined
,result
也是如此。
理想情况下,我想得到一个像这样{ inputs : {name: 'inputName' , value: 'abcde'} }
的对象。
在 Angular UI Bootstrap 中尝试 resolve 方法
var modalOptions = {
resolve: {
myvar: function () {
return $scope.myvar;
}
}
};
modalService.showModal(modalOptions);
相关文章:
- 如何将输入范围的值传递给JS中的变量
- 如何在submit to sightly时将表单输入值作为参数传递给WCMUsePojo
- 将值传递给jquery创建的输入字段
- 如何通过jquery将cakehp-formhelper输入值传递给ajax
- 将 HTML 中用户输入的值传递给 jQuery.Ajax
- 如何将 html 输入值传递给 php?- 变量不起作用
- 如何将 jQuery 输入值传递给 Google Maps JS API v3
- 来自 PHP foreach 循环的隐藏输入值未正确传递给 JQuery
- 上传图片时通过jQuery更改输入值[上传]
- 确认弹出并将php值传递给js,输入图像作为提交
- 使用javascript将值传递给html输入标记
- Firefox没有将输入文本字段中的值传递给javascript函数
- 将输入值按角度传递给$rootScope变量
- 如何将输入值传递给ajax
- 如何将表单输入值传递给JavaScript函数
- 将js变量或输入值传递给razor
- 如何将输入值传递给JavaScript函数
- 将html输入值传递给knockout视图
- 将输入值传递给$mdDialog
- 将文本输入值传递给IBM Worklight适配器