我对AngularJS相当陌生,并且从模态对话框服务返回数据时遇到问题。基本上,我复制了Dan Wahlin的服务http://weblogs.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>
所以我的问题是如何将名称字段的值返回给控制器?我在网上浏览了所有示例,所有示例都具有打开模式的函数,该函数驻留在控制器内部,这使得打开控制器的函数中也存在来自控制器的$ scope变得容易得多。
我尝试将以下代码添加到服务中的“显示”功能,但无法正常工作。
tempModalDefaults.resolve = function($scope) { mydata = function () { return $scope.mydata; } }
谢谢
PS我在代码中将modalService重命名为ModalService,所以这不是错字。模态将按其应有的方式打开和关闭,我只是无法将字段的值传递回控制器。
在您的按钮中,添加 data-ng-click="modalOptions.ok(mydata)"
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功能,则需要稍微更改代码
modalOptions.submit
在您的HTML中,传递mydatato modalOptions.submit函数:
mydata
<form ng-submit="modalOptions.submit(mydata)">
您的模型服务,替换为以下show功能:
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); }); }