web-dev-qa-db-ja.com

angularjsモーダルダイアログサービスからデータを返す

私はAngularJSを初めて使い、モーダルダイアログサービスからデータを返すのに問題があります。基本的に、ダンワーリンのサービスをコピーしました 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>

私の質問は、名前フィールドの値をどのようにしてコントローラーに戻すのですか？私はすべてのWebを見てきましたが、すべての例には、コントローラー内にモーダルを開く機能があります。これにより、コントローラーからの$ scopeもモーダルを開く機能に存在するため、はるかに簡単になります。

サービスの「show」関数に次のコードを追加しようとしましたが、機能しませんでした。

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

ありがとう

追伸コード内でmodalServiceの名前をModalServiceに変更したため、タイプミスではありません。モーダルは必要に応じて開いたり閉じたりしますが、フィールドの値をコントローラーに渡すことができません。

javascriptangularjstwitter-bootstrapmodal-dialogangular-ui-bootstrap
17
petermk

ボタンに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 [〜＃〜]

38
Khanh TO