gpt4 book ai didi

angularjs - 如何使用 Angular 1.5 *components* 和 UI Bootstrap Modal 解析

转载 作者:行者123 更新时间:2023-12-04 03:36:26 30 4
gpt4 key购买 nike

我正在尝试将数据传递给 ubi modal那是 Angular 1.5 组件 使用决心。我知道这是可能的,因为它表明 uib 模态文档中的组件支持解析。

component (Type: string, Example: myComponent) - A string reference tothe component to be rendered that is registered with Angular'scompiler. 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 Routerresolves for details.


我找到的所有示例都在 open 方法中声明了 templateurl/controller。然后将 resolve 中声明的项目注入(inject)到 Controller 中。我将一个 Angular 1.5 组件传递给模态(不是 templateurl/controller),当我尝试从解析中注入(inject)项目时,我得到一个可怕的“未知提供者”错误。
这是我的代码。我正在尝试传递一个网址。
调用模型的组件 Controller

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;
}
}
});
};
}

模态组件中的 Controller

ImageModalController.$inject = ['url'];

function ImageModalController(url) {
var $ctrl = this;

$ctrl.$onInit = function() {
console.log(url);
};

}

最佳答案

对于组件,需要将解析添加到绑定(bind)中,然后在隔离范围内可用。换句话说,添加 resolve: '<'声明组件时。

模态组件

var template = require('./image_modal.component.html');
var ImageModalController = require('./image_modal.controller');

module.exports = {
template: template,
bindings: {
close: '&',
resolve: ‘<‘
},

controller: ImageModalController
};


调用模型的组件 Controller

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;
}
}
});
};
}


模态组件的 Controller

ImageModalController.$inject = [];
function ImageModalController() {
var $ctrl = this;

$ctrl.$onInit = function () {
console.log($ctrl.resolve.url);
};
}

关于angularjs - 如何使用 Angular 1.5 *components* 和 UI Bootstrap Modal 解析,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39901439/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com