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

问题描述

我是 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 = 函数 () {var modalOptions = {closeButtonText: '取消',actionButtonText: '保存',headerText: '保存对话框'}ModalService.showModal({}, modalOptions).then(function (result) {});}});

然后我的部分是这样的:

<h3>{{modalOptions.headerText}}</h3>
<form ng-submit="modalOptions.submit()"><div class="modal-body"><label>名称</label><input type="text" data-ng-model="mydata.name">

<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>

这个模式是这样调用的:

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

所以我的问题是如何将 name 字段的值返回给控制器?我查看了整个网络，所有示例都具有在控制器内部打开模态的函数，这使得它更容易，因为控制器中的 $scope 也存在于打开模态的函数中.

我尝试将以下代码添加到服务中的显示"功能中，但没有奏效.

 tempModalDefaults.resolve = function($scope) {mydata = 函数 () {返回 $scope.mydata;}}

谢谢

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

解决方案

在你的按钮中，添加 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 函数:

你的模型服务，替换show函数:

return $modal.open(tempModalDefaults);//删除.result

您的控制器:

$scope.showModal = function () {var modalOptions = {closeButtonText: '取消',actionButtonText: '保存',headerText: '保存对话框',提交:功能(结果){$modalInstance.close(result);}}var $modalInstance = ModalService.showModal({}, modalOptions);$modalInstance.result.then(函数(结果){console.log(result.name);});}

演示

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.

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

Thanks

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.

解决方案

In your button, add data-ng-click="modalOptions.ok(mydata)"

<button type="submit" class="btn btn-primary" data-ng-click="modalOptions.ok(mydata)">{{modalOptions.actionButtonText}}</button>

And you can get it from:

ModalService.showModal({}, modalOptions).then(function (result) {
              console.log(result.name);
        });

DEMO

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

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

Your controller:

$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

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