[英]How to pass arguments and retrieve results from Angular UI Bootstrap Modal using Components
我有一个简单的例子,我将模态定义为组件,并使用uiModal.open打开该模态。 但是,当我想在open方法上使用“ resolve”并在控制器构造函数上使用参数将任何自定义数据传递给该模式时,不会传递数据。 另外尝试注入$ uibModalInstance失败,并显示错误未知提供程序:$ uibModalInstanceProvider <-$ uibModalInstance,因此在关闭模式时无法返回结果。
模板:
<div class="modal-header">
<h3 class="modal-title" id="modal-title">Modal</h3>
</div>
<div class="modal-body" id="modal-body">
Some text
<div class="row">
<div class="col-sm-10">
<textarea class="form-control" name="closureNotes" rows="6" data-ng-model="vm.closureNote" required>
</textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default btn-close" type="submit" ng-click="vm.ok()">Close Exception Request</button>
<button class="btn btn-danger" type="button" ng-click="vm.cancel()">Cancel</button>
</div>
零件:
import template from './closeExceptionModal.html';
import controller from './closeExceptionModal.controller';
let closeExceptionModalComponent = {
restrict: 'E',
bindings: {
resolve: '<',
close: '&',
dismiss: '&'
},
template,
controller,
controllerAs: 'vm'
};
export default closeExceptionModalComponent;
控制器:
class CloseExceptionModalController {
constructor() {
//I need to retrieve here some data from caller
}
ok() {
this.close(); //I need to pass here result to caller using modalInstance.close
}
cancel() {
this.dismiss();
}
}
export default CloseExceptionModalController;
呼叫者控制器代码:
//I need to pass some data to modal
let modalInstance = this.$uibModal.open({
animation: true,
component: 'closeExceptionModal',
appendTo: angular.element(document.body),
})
modalInstance.result.then( (result) => {
alert(result); //this must be result data from modal
}, () => {
});
我花了将近三个小时来研究该问题,尝试传递$ modalInstance,$ uibModalInstance等。我尝试了解析和构造函数参数,我在stackoverflow上搜索了很多线程,但都没有运气,建议升级ui.bootstrap,angularjs等..
核心问题是,我尝试以不同的方式执行的操作是使用组件定义模态,而不是内联定义“调用方”控制器代码中的控制器和指示的模板。
最后,借助从许多线程中获得的一些局部知识,我得到了这个奇妙而简单的解决方案。
要将任何数据传递给基于组件的modal和modalInstance,我们要做的就是更新组件定义绑定部分:
import template from './closeExceptionModal.html';
import controller from './closeExceptionModal.controller';
let closeExceptionModalComponent = {
restrict: 'E',
bindings: {
resolve: '<', //this let us pass any data from caller constructor
modalInstance: '<', //modalInstance will be auto injected
close: '&',
dismiss: '&'
},
template,
controller,
controllerAs: 'vm'
};
export default closeExceptionModalComponent;
模态的调用应如下所示:
let modalInstance = this.$uibModal.open({
animation: true,
component: 'closeExceptionModal',
appendTo: angular.element(document.body),
resolve: {
modalData: function() {
return "test";
}
}
})
modalInstance.result.then( (result) => {
alert(result);
}, () => {
});
我的最终模态控制器如下所示:
class CloseExceptionModalController {
constructor() {
this.$ctrl = this; //we store the controller instance
console.log(this.$ctrl.resolve.modalData); //here is my input data
}
ok() {
//modal instance is auto injected and we can call close passing result
this.$ctrl.modalInstance.close(this.closureNote);
}
cancel() {
this.dismiss();
}
}
export default CloseExceptionModalController;
我希望这会帮助其他尝试使用组件和传递/返回数据执行ui引导模态的人! :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.