从AngularJS模态对话框服务返回数据

Question

我对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) {

        });
    }

});

那么我这样写我的部分代码：

Then I have my partial like so:

<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 也存在于打开模态的函数中。

我尝试将以下代码添加到服务中的“show”函数中，但它并没有起作用。

    tempModalDefaults.resolve = function($scope) {
        mydata = function () {
            return $scope.mydata;
        }
    }

谢谢

顺便说下，我在代码中将modalService重命名为ModalService，这不是一个错别字。模态框可以正常打开和关闭，但我不能将字段的值传回控制器。

- petermk

Answer 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);
        });

演示

如果要使用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);
        });
    }

演示

- Khanh TO

---

太棒了！感谢您让我清楚地理解模态承诺 :) - user1494912