Javascript 将数据对象从uibModal解析为组件AngularJS的正确方法
我试图更好地理解uibModal resolves的工作原理,我试图将一个值从主控制器传递到uibModal组件,当我单击其中一个项目时,我有一个对象集合(对象列表),我正在为所选对象分配一个活动键,然后在模态组件上,我需要一种方法来检查具有“active”:true的项,以便可以从owlCarousel将对象的索引值指定给startPosition设置。现在,每次我点击这些项目,就会打开带有猫头鹰旋转木马的模式,并且一直从0开始。如果用户单击索引值为4的项目,该值需要反映在活动的owl转盘项目上,我认为我有正确的设置,我可以获得索引值,但我无法从workModalComponent访问该值Javascript 将数据对象从uibModal解析为组件AngularJS的正确方法,javascript,angularjs,json,owl-carousel,Javascript,Angularjs,Json,Owl Carousel,我试图更好地理解uibModal resolves的工作原理,我试图将一个值从主控制器传递到uibModal组件,当我单击其中一个项目时,我有一个对象集合(对象列表),我正在为所选对象分配一个活动键,然后在模态组件上,我需要一种方法来检查具有“active”:true的项,以便可以从owlCarousel将对象的索引值指定给startPosition设置。现在,每次我点击这些项目,就会打开带有猫头鹰旋转木马的模式,并且一直从0开始。如果用户单击索引值为4的项目,该值需要反映在活动的owl转盘项目
this.works[indx].active = true;
然后获取项目的索引值:
this.indx = indx;
我使用以下函数调用模态:
let modalInstance = this.$uibModal.open({
windowClass: 'work-modal',
size: 'lg',
backdropClass: 'work-modal',
component: 'workModal',
resolve: {
works: function() {
return $ctrl.works; //passing the entire object collection to modal to display on a carousel
},
indx: function() {
console.log('indx resolve', indx ); // need to pass this value to workModal component so this value can be assign to the carousel startPosition
return indx;
}
},
});
return modalInstance;
然后是workModal组件,在该组件中,我试图根据用户从集合中选择的内容设置自定义活动元素:
export function workModalComponent() {
'ngInject';
let component = {
restrict: 'E',
templateUrl: 'app/components/work-modal/work-modal.html',
bindings: {
resolve: '<',
close: '&'
},
controller: workModalController,
controllerAs: '$ctrl',
bindToController: true
};
return component;
}
class workModalController {
constructor (workFeed) {
'ngInject';
//this.indx = indx; HOW DO I GET THIS VALUE HERE ?
this.works = workFeed.getWorks(); // DATA DIRECTIVE
let active = '4'; //NEED THIS VALUE TO BE ASSIGN DINAMICALLY DEPENDING ON THE VALUE ASSIGNED FROM this.indx = indx;
this.properties = {
items: 1,
autoplay: true,
autoplayTimeout: 3000,
loop: true,
navSpeed: 500,
dotsSpeed: 500,
startPosition: active, // THIS VALUE NEEDS TO UPDATED
responsive: {
0: {
dots: true,
nav: true
},
576: {
nav: true,
items: 1
},
768: {
nav: false,
dots: true,
items: 1
}
},
onChange: function () {
}
};
}
} //workModalController
导出函数workModalComponent(){
"ngInject",;
让组件={
限制:'E',
templateUrl:'app/components/work modal/work modal.html',
绑定:{
解决方法:“不要只在博客上写你所做的事情。描述问题。告诉我们预期的行为应该是什么。@georgeawg感谢你的投入!非常感谢。我将添加一些更新。