从模态AngularJS获取数据

Question

I am trying to get data FROM modal to invoking controller, and all the examples I have found only describe way to get data to modal.

What is the proper way to do it?

This is a form I am using in modal:

<form class="form-horizontal">

<div class="modal-body">

    <div class="control-group">
        <label class="control-label">Name:</label>
        <div class="controls">
            <input type="text" ng-model="transaction.name" placeholder="Transaction name" />
        </div>
    </div>

    <div class="control-group">
        <label class="control-label">Category</label>
        <div class="controls">
            <input type="text" ng-model="transaction.category" placeholder="Category" />
        </div>
    </div>

    <div class="control-group">
        <label class="control-label">Amount</label>
        <div class="controls">
            <input type="text" ng-model="transaction.amount" placeholder="Amount" />
        </div>
    </div>

    <div class="control-group">
        <label class="control-label">Date</label>
        <div class="controls">
            <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="transaction.date" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />
            <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
        </div>
    </div>


</div>

<div class="modal-footer">
    <button type="button" class="btn pull-left" data-dismiss="modal">
        <i class="icon-remove"></i>&nbsp;&nbsp;Cancel
    </button>
    <button type="submit" class="btn btn-primary" ng-disabled="pwError || incomplete" data-dismiss="modal" ng-click="createTransaction()">
        <i class="icon-ok icon-white"></i>&nbsp;&nbsp;Save Changes
    </button>
</div>

These are controllers:

moneyApp.controller("TransactionController", function($scope, $http, $modal, $log) {
console.log("modal: ", $modal);
$scope.transaction = {}
$scope.open = function() {

    var modalInstance = $modal.open({
        templateUrl: 'partials/modal.html',
        controller: 'ModalInstanceController',
        resolve: {
            transaction: function() {
                return $scope.transaction;
            }
        }
        });

    modalInstance.result.then(function (receivedTransaction) {
        $scope.selected = receivedTransaction;
        console.log("Transaction received: ", transaction);
    }, function () {
        $log.info('Modal dismissed at: ' + new Date());
    });

};

$http({method: 'GET', url: 'transactions/15/all/'}).success(function(data) {
    $scope.transactions = data; // response data
});
})

and

moneyApp.controller("ModalInstanceController", function($scope, $modalInstance, $http,     transaction) {
$scope.createTransaction = function() {

    console.log("Transakcja: ", $scope.transaction);
    $scope.transaction.budgetId = 15;
    $scope.selected = {
        item: $scope.transaction
    }
    $http({method: 'POST', url: 'transactions/add/', data : $scope.transaction, headers:{'Accept': 'application/json', 'Content-Type': 'application/json; ; charset=UTF-8'}}).success(function(data) {
        console.log("Transaction succesfully added to a DB...");
    });
}


$scope.ok = function () {
    $modalInstance.close($scope.selected.item);
};

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};
});

When I am trying to invoke method createTransaction, $scope.transaction is undefined. How to get data from this form?

Answer 1

I think you need to assign transaction to $scope.transaction in your ModalInstanceController because you are passing in the transaction object but not putting it into $scope.

$scope.transaction = transaction

Answer 2

In your Modal form you need to pass the ng-model object(ie transaction) to the function (createTransaction()) which gets called on form submit.

 <button type="submit" class="btn btn-primary" ng-disabled="pwError || incomplete" data-dismiss="modal" ng-click="createTransaction(transaction)">
        <i class="icon-ok icon-white"></i>&nbsp;&nbsp;Save Changes
 </button>

And in your controller add the object as parameter to the java-script function.

$scope.createTransaction = function(transaction) {

    console.log("transaction details: "+ transaction.category+"  "+transaction.amount);
};

Let me know if you are facing any issues, i can share the working code of mine.