Javascript 如何在AngularJS的点击事件中将数据传递到模式中

Javascript 如何在AngularJS的点击事件中将数据传递到模式中,javascript,angularjs,twitter-bootstrap,dom,angular-ui,Javascript,Angularjs,Twitter Bootstrap,Dom,Angular Ui,我的问题是: 我正在使用AngularJS将一个简单的数据跟踪应用程序转换为SPA。我的HTML模板中有一个带有可点击日期的表格,其中显示了一些数据。每个按钮都分配了一个id,该id来自数据库中的ObjectId属性。我的目标是连接这些按钮以实现更新功能,我需要自动填充表单。我可以查询我以前构建的API并获取数据,但我无法将其公开给我的模型 我的API已经构建并测试过了。模态工作,它打开和关闭时,我想和形式看起来不错 我的表格标记: <tbody ng-repeat="flt in vm.

我的问题是:

我正在使用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>
以及我的数据服务,用于进行API调用(我相信API能够正常工作):

这就是我被困的地方。在我的解析中生成的数据应该作为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>

航班日期:

我知道这是很多代码,但这个问题让我发疯。难道不能像普通函数一样通过参数将数据传递给控制器吗?非常感谢您的帮助

这是上面jsonmurphy所说的,但是稍微扩展一下,解析作为依赖项传递到控制器中。因此,根据控制器的定义,您可以将解析更改为以下内容,它应该可以工作

    resolve : {
      flight : function () {
        return {
          data : flightData.flight(id)
        };
      }
    }
由于flightData.flight(id)正在返回承诺,并且您希望解析等待它,请尝试以下操作:

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

我建议你编辑你的文章,而不是在评论中指出错误。谢谢,我对堆栈溢出有点陌生,找不到按钮。有一分钟,我认为它是不可编辑的,因为我记得读到一些形式的编辑是一种特权。我认为解析对象(即
数据
)中使用的名称应该被注入控制器,而不是
飞行
,只是尝试了一下,没有成功。使用flight:function(){return data:…}语法,我的数据似乎会在flight.data中,不是吗?这就是我最初的解析。因此,我的HTML模板显示flight.data.property。我尝试了这个名称和flightData.property,但数据似乎仍然不可用。您的问题中没有flightData.flighty的实现…您可以添加该名称或单步执行flightData.flighty(id)并确保它返回航班吗?当然,但这只是一个API调用,我在API控制器的控制台上打印了ID和返回的航班。现在我无法编辑这个问题
var findOne=function(id){if(id){return$http.get('/findOne/'+id);}else{returnnull;}$http.get返回响应承诺,而不仅仅是数据。解析不会等待承诺解析,因为您正在将其包装到另一个js对象中。尝试直接返回flightData.flight(id)-我会用它更新答案。
    resolve : {
      flight : function () {
        return {
          data : flightData.flight(id)
        };
      }
    }
resolve: {
  flight: function(){ return flightData.flight(id); }
}