Angularjs 将数据推拉到ui.bootstrap模式
我在这里建立了一个plunkr: 我试图在您单击任务时将表单数据推拉到模式窗口中。我已经读到,您可以使用modal的“resolve”属性(见下文)来实现这一点,但我一直无法让它实际工作。如有任何见解,将不胜感激Angularjs 将数据推拉到ui.bootstrap模式,angularjs,ui.bootstrap,Angularjs,Ui.bootstrap,我在这里建立了一个plunkr: 我试图在您单击任务时将表单数据推拉到模式窗口中。我已经读到,您可以使用modal的“resolve”属性(见下文)来实现这一点,但我一直无法让它实际工作。如有任何见解,将不胜感激 var modalInstance = $modal.open({ templateUrl: 'editTask.html', controller: 'ModalInstanceCtrl', size: size, scope: $scope, resolve:
var modalInstance = $modal.open({
templateUrl: 'editTask.html',
controller: 'ModalInstanceCtrl',
size: size,
scope: $scope,
resolve: {
items: function () {
return $scope.items;
}
}
});
请让我知道如果你需要更多的细节 如果您想使用resolve(您可以),nit将如下所示,例如:
$scope.open = function(size, task) {
var modalInstance = $modal.open({
templateUrl: 'editTask.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
task: function() {
return task
}
}
});
};
HTML:
您必须在解析中传递要解析的范围(传递到模式)。并在模态控制器中进行求解
这就是你想要实现的吗?
我修改了模态以将noStoneTasks范围传递给模态
//modal
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'editTask.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
noStoneTasks: function () {
return $scope.noStoneTasks;
}
}
});
};
当用户单击“确定”时,我也会修改范围
uxModule.controller('ModalInstanceCtrl', function ($scope, $modalInstance, noStoneTasks) {
$scope.ok = function () {
noStoneTasks[0].actHours++;
$modalInstance.close('save');
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
太多的代码。为了回答您的问题,设置更简单的演示就足够了。您也可以使用服务来实现它,并允许主控制器和模式控制器使用服务在彼此之间传递数据。好的,现在您希望在演示中向/从这个简化的模式传递什么?@dfsq只是主题很好。我只需要一个例子。我把表单控件放进了模态中。太棒了,我稍微修改了你的plunk以包含一个输入。如何将输入值传递回主页?如果按“确定”,则可以将输入绑定到传递的任务对象的副本,并更新原始任务对象的已更改属性。
uxModule.controller('ModalInstanceCtrl', function ($scope, $modalInstance, noStoneTasks) {
$scope.ok = function () {
noStoneTasks[0].actHours++;
$modalInstance.close('save');
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});