如何使用 resolve with Angular 1.5 *components* 和 UI Bootstrap Modal
How to use resolve with Angular 1.5 *components* and UI Bootstrap Modal
我正在尝试使用 resolve 将数据传递给 Angular 1.5 component 的 ubi modal。我知道这是可能的,因为它表明 uib 模态文档中的组件支持解析。
component (Type: string, Example: myComponent) - A string reference to
the component to be rendered that is registered with Angular's
compiler. If using a directive, the directive must have restrict: 'E'
and a template or templateUrl set.
It supports these bindings:
(...)
resolve - An object of the modal resolve values. See UI Router
resolves for details.
我找到的所有示例都在 open 方法中声明 templateurl/controller。然后将 resolve 中声明的项目注入到控制器中。我正在将 Angular 1.5 组件传递给模态(不是 templateurl/controller),当我尝试从 resolve 注入该项目时,我收到了一个可怕的“未知提供者”错误。
这是我的代码。我正在尝试通过 url.
调用模型的组件的控制器
ParentController.$inject = ['$uibModal'];
function ParentController $uibModal) {
var $ctrl = this;
$ctrl.openComponentModal = function(url) {
var modalInstance = $uibModal.open({
animation: false,
component: "ImageModalComponent",
resolve: {
url: function() {
return url;
}
}
});
};
}
模态组件中的控制器
ImageModalController.$inject = ['url'];
function ImageModalController(url) {
var $ctrl = this;
$ctrl.$onInit = function() {
console.log(url);
};
}
对于组件,需要将resolve添加到绑定中,然后在隔离范围内可用。也就是说,在声明组件的时候加上resolve: '<'
。
模态组件
var template = require('./image_modal.component.html');
var ImageModalController = require('./image_modal.controller');
module.exports = {
template: template,
bindings: {
close: '&',
resolve: ‘<‘
},
controller: ImageModalController
};
调用模型的组件控制器
ParentController.$inject = ['$uibModal'];
function ParentController $uibModal){
var $ctrl = this;
$ctrl.openComponentModal = function (urlFromClickEvent) {
var modalInstance = $uibModal.open({
animation: false,
component: "ImageModalComponent",
resolve: {
url: function() {
return url;
}
}
});
};
}
模态组件的控制器
ImageModalController.$inject = [];
function ImageModalController() {
var $ctrl = this;
$ctrl.$onInit = function () {
console.log($ctrl.resolve.url);
};
}
我正在尝试使用 resolve 将数据传递给 Angular 1.5 component 的 ubi modal。我知道这是可能的,因为它表明 uib 模态文档中的组件支持解析。
component (Type: string, Example: myComponent) - A string reference to the component to be rendered that is registered with Angular's compiler. If using a directive, the directive must have restrict: 'E' and a template or templateUrl set.
It supports these bindings:
(...)
resolve - An object of the modal resolve values. See UI Router resolves for details.
我找到的所有示例都在 open 方法中声明 templateurl/controller。然后将 resolve 中声明的项目注入到控制器中。我正在将 Angular 1.5 组件传递给模态(不是 templateurl/controller),当我尝试从 resolve 注入该项目时,我收到了一个可怕的“未知提供者”错误。
这是我的代码。我正在尝试通过 url.
调用模型的组件的控制器
ParentController.$inject = ['$uibModal'];
function ParentController $uibModal) {
var $ctrl = this;
$ctrl.openComponentModal = function(url) {
var modalInstance = $uibModal.open({
animation: false,
component: "ImageModalComponent",
resolve: {
url: function() {
return url;
}
}
});
};
}
模态组件中的控制器
ImageModalController.$inject = ['url'];
function ImageModalController(url) {
var $ctrl = this;
$ctrl.$onInit = function() {
console.log(url);
};
}
对于组件,需要将resolve添加到绑定中,然后在隔离范围内可用。也就是说,在声明组件的时候加上resolve: '<'
。
模态组件
var template = require('./image_modal.component.html');
var ImageModalController = require('./image_modal.controller');
module.exports = {
template: template,
bindings: {
close: '&',
resolve: ‘<‘
},
controller: ImageModalController
};
调用模型的组件控制器
ParentController.$inject = ['$uibModal'];
function ParentController $uibModal){
var $ctrl = this;
$ctrl.openComponentModal = function (urlFromClickEvent) {
var modalInstance = $uibModal.open({
animation: false,
component: "ImageModalComponent",
resolve: {
url: function() {
return url;
}
}
});
};
}
模态组件的控制器
ImageModalController.$inject = [];
function ImageModalController() {
var $ctrl = this;
$ctrl.$onInit = function () {
console.log($ctrl.resolve.url);
};
}