从 angularjs 模态对话服务返回数据

Posted 2023-02-22

【中文标题】从 angularjs 模态对话服务返回数据

【英文标题】：returning data from angularjs modal dialog service

【发布时间】：2014-01-28 20:35:47

【问题描述】：

我对 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;
        
    

谢谢

附：我在代码中将 modalService 重命名为 ModalService，所以这不是错字。模态按应有的方式打开和关闭，我只是无法将字段的值传递回控制器。

【参考方案1】：

在您的按钮中，添加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 传递给 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

【讨论】：

完美！感谢您让我清楚地理解了模态承诺 :)