Anglejs 모달 대화 상자 서비스에서 데이터 반환

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

        });
    }

});

그런 다음 내 부분이 다음과 같습니다.

<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로 바꾸었으므로 오타가 아닙니다.모달은 정상적으로 열리고 닫히지만 필드 값을 컨트롤러에 다시 전달할 수 없습니다.

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

데모