从angularjs模态对话框服务返回数据 [英] returning data from angularjs modal dialog service

问题描述

我是相当新的AngularJS并用从一个模态对话框服务返回的数据有问题。基本上，我复制丹Wahlin的服务<一个href=\"http://weblogs.asp.net/dwahlin/archive/2013/09/18/building-an-angularjs-modal-service.aspx\">http://weblogs.asp.net/dwahlin/archive/2013/09/18/building-an-angularjs-modal-service.aspx和我从我的控制器调用它。

I am fairly new to AngularJS and having a problem with returning data from a modal dialog service. Basically, I copied Dan Wahlin's service http://weblogs.asp.net/dwahlin/archive/2013/09/18/building-an-angularjs-modal-service.aspx and am calling it from my controller.

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>

此模式被调用是这样的：

This modal is being invoked like this:

<button class="btn btn-primary hidden pull-right" id="save" data-ng-click="showModal()">Save</button>

所以我的问题是如何获得的名称字段回控制器的价值？我找遍了整个网络和所有的例子有打开的模态驻留在控制器内的功能，这使得为$范围可以更容易从控制器也存在于打开的模态的功能。

So my question is how do I get the value of the name field back to the controller? I've looked all over the web and all the examples have the function that opens the modal reside inside the controller, which makes it much easier as $scope from the controller also exists in the function that opens the modal.

我尝试添加以下code，以显示功能的服务，但没有奏效。

I tried adding the following code to the 'show' function in the service but it did not work.

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

感谢

P.S。我改名为modalService在ModalService我的code，所以这不是一个错字。该模式打开和关闭，因为它应该，我只是无法通过该字段的值回控制器。

P.S. I renamed modalService to ModalService in my code, so that's not a typo. The modal opens and closes as it should, I just can't pass the field's value back to the controller.

推荐答案

在您的按钮，添加数据-NG-点击=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 功能，您需要更改code位

If you want to use modalOptions.submit function, you need to change your code a bit

在你的HTML，通过 MYDATA 到 modalOptions.submit 功能：

In your HTML, pass the mydata to modalOptions.submit function:

<form ng-submit="modalOptions.submit(mydata)">

您模型服务，替换显示功能：

Your Model Service, replace in the show function:

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

演示

这篇关于从angularjs模态对话框服务返回数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！