如何在单击事件中将数据传递到 AngularJS 中的模态
How to pass data into a modal in AngularJS on click event
这是我的问题:
我正在使用 AngularJS 将一个简单的数据跟踪应用程序转换为 SPA。在显示一些数据的 HTML 模板中,我有 table 和可点击的日期。每个按钮都分配有一个 id,该 id 派生自我数据库中的 ObjectId 属性。我的目标是将这些按钮连接起来以实现更新功能,并且我需要自动填充表单。我可以查询我之前构建的 API 并取回数据,但我一直无法将其公开给我的模式。
我的 API 已经构建和测试。模态有效,它可以在我需要时打开和关闭,并且表格看起来不错。
我的 table 标记:
<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>
我知道这是很多代码,但这个问题让我抓狂。不能像普通函数一样通过参数将数据传递到控制器中吗?非常感谢所有帮助。
这就是 jsonmurphy 上面所说的,但是为了扩展一点,解析作为依赖项传递到控制器中。因此,根据您的控制器的定义方式,您可以将解析更改为以下内容,它应该可以工作。
resolve : {
flight : function () {
return {
data : flightData.flight(id)
};
}
}
由于 flightData.flight(id) 正在返回一个承诺,而您希望 resolve 等待它,请尝试以下操作:
resolve: {
flight: function(){ return flightData.flight(id); }
}
这是我的问题:
我正在使用 AngularJS 将一个简单的数据跟踪应用程序转换为 SPA。在显示一些数据的 HTML 模板中,我有 table 和可点击的日期。每个按钮都分配有一个 id,该 id 派生自我数据库中的 ObjectId 属性。我的目标是将这些按钮连接起来以实现更新功能,并且我需要自动填充表单。我可以查询我之前构建的 API 并取回数据,但我一直无法将其公开给我的模式。
我的 API 已经构建和测试。模态有效,它可以在我需要时打开和关闭,并且表格看起来不错。
我的 table 标记:
<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>
我知道这是很多代码,但这个问题让我抓狂。不能像普通函数一样通过参数将数据传递到控制器中吗?非常感谢所有帮助。
这就是 jsonmurphy 上面所说的,但是为了扩展一点,解析作为依赖项传递到控制器中。因此,根据您的控制器的定义方式,您可以将解析更改为以下内容,它应该可以工作。
resolve : {
flight : function () {
return {
data : flightData.flight(id)
};
}
}
由于 flightData.flight(id) 正在返回一个承诺,而您希望 resolve 等待它,请尝试以下操作:
resolve: {
flight: function(){ return flightData.flight(id); }
}