Question

这是我的问题：

我正在使用AngularJS将简单的数据跟踪应用程序转换为SPA。我的HTML模板中有可点击日期的表格，显示了一些数据。每个按钮都分配了一个id，该id是从我的数据库中的ObjectId属性派生的。我的目标是将这些按钮挂钩以获得更新功能，我需要自动填充表单。我可以查询我之前构建的API并获取数据，但我无法将其暴露给我的模态。

我的API已经构建和测试。模态有效，它在我想要时打开和关闭，表格看起来很好。

我的桌面标记：

<tbody ng-repeat="flt in vm.data.flights">
  <tr>
    <td><a ng-attr-id="{{ flt._id }}" ng-click="vm.popupReviewForm()" class="btn btn-default">{{flt.fltDate}}</a></td>
    <td>{{flt.hobbsIn}}</td>
    <td>{{flt.hobbsOut}}</td>
    <td>{{flt.hoursFlown}}</td>
    <td>{{flt.fuelHour}}</td>
    <td>{{flt.fuelIn}}</td>
    <td>{{flt.hoursLastOilChange}}</td>
    <td class="text-info">{{flt.oilChange}}</td>
  </tr>
</table>

页面的控制器，用我的方法获取ID并将其传递给模态：

vm.popupReviewForm = function ($event) {
      var id = $event.currentTarget.attributes['id'].value;
      var modalInstance = $modal.open ({
        templateUrl : '/reviewModal/reviewModal.view.html',
        controller : 'reviewModalCtrl as vm',
        resolve : {
          data : function () {
            return {
              data : flightData.flight(id)
            };
          }
        }
      });
      modalInstance.result.then(function (data) {
        //
      });
    };

我的数据服务进行API调用（我相信API能够正常运行）：

var findOne = function (id) {
      return $http.get('/findone/' + id);
    };

    return {
      flightData : getData,
      flight : findOne
    };

这是我被困的地方。在我的决心中产生的数据应作为flight.data传递给模态控制器，对吗？这是我的模态控制器：

angular
.module('loc8rApp')
.controller('reviewModalCtrl', reviewModalCtrl);



reviewModalCtrl.$inject = ['$modalInstance', 'loc8rData', 'flight'];
  function reviewModalCtrl ($modalInstance, loc8rData, flight) {
    var vm = this;
    vm.formError = "";
    vm.flight = flight.data;
    $log(vm.flight);
    vm.onSubmit = function () {

  if (!vm.data.fltDate || !vm.data.hobbsOut || !vm.data.fuelOut || !vm.data.oilDipstick) {
    vm.formError = "Hobbs Out, Fuel Out, Date, and Oil Dipstick are required!";
    console.log(vm.data);
    return false;
  } else {
    vm.formError = "";
    //
  }
};

vm.modal = {
  close : function (result) {
    $modalInstance.close(result);
  },
  cancel : function () {
    $modalInstance.dismiss('cancel');
  }
};
}

这是表单的一些HTML标记，带有示例输入字段，以及我当前尝试将vm.flight对象绑定到我的表单：

<div class="form-group">
    <label for="fltDate" class="col-xs-2 col-sm-2 control-label">Flight Date:</label>
    <div class="col-xs-10 col-sm-10">
      <input id="fltDate" name="fltDate" required="required" value="{{ vm.flight.flt_date }}" class="form-control"/> 
    </div>
  </div>

我知道这是很多代码，但这个问题让我疯狂。不能只通过像普通函数这样的参数将数据传递给控制器吗？非常感谢所有帮助。

Answer 1

这就是jsonmurphy上面所说的，但是为了扩展一点，结果会作为依赖关系传递到控制器中。因此，对于控制器的定义方式，您可以将解决方案更改为以下内容，它应该可以正常工作。

    resolve : {
      flight : function () {
        return {
          data : flightData.flight(id)
        };
      }
    }

由于flightData.flight（id）正在返回一个promise并且您希望解析等待它，请尝试以下操作：

resolve: {
  flight: function(){ return flightData.flight(id); }
}

如何在click事件中将数据传递到AngularJS中的模态

1 个答案: