0

我正在尝试从模态获取数据以调用控制器，而我发现的所有示例仅描述了将数据获取到模态的方法。

正确的方法是什么？

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

<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 未定义。如何从这个表单中获取数据？

4

2 回答 2

0

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

$scope.transaction = 交易

于 2013-11-11T21:07:37.013 回答
0

在您的模态表单中，您需要将 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-script 函数。

$scope.createTransaction = function(transaction) {

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

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

于 2017-10-31T04:41:59.087 回答