我对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) { }); } });
然后我就像这样:
{{modalOptions.headerText}}
在按钮中添加 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); });
DEMO
如果要使用modalOptions.submit
函数,则需要稍微更改一下代码
在HTML中,传递给mydata
to 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); }); }
DEMO