Question

我正在尝试将数据从模态转换为调用控制器，而我发现的所有示例都只描述了将数据转换为模态的方法。

这样做的正确方法是什么？

这是我在模态中使用的一种形式：

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

这些是控制器：

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

和

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

当我尝试调用createTransaction方法时，$ scope.transaction未定义。如何从这个表单中获取数据？

Answer 1

我认为您需要在ModalInstanceController中将事务分配给$ scope.transaction，因为您传入了事务对象但未将其放入$ scope。

$ scope.transaction = transaction

Answer 2

在你的模态表单中，你需要将ng-model对象（即事务）传递给在表单提交时调用的函数（createTransaction（））。

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

在控制器中将对象作为参数添加到java脚本函数中。

$scope.createTransaction = function(transaction) {

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

如果您遇到任何问题，请告诉我，我可以分享我的工作代码。

从模态AngularJS获取数据

2 个答案: