# 如何使用addons中的controller
# 1. API预览
WEBSDK的controller都可以在API Reference文档的Modules > UIExtension >
controllers栏目中找到,其中,定义在addons中的controller都汇总在Modules > UIExtension > controllers > UIXAddon栏目下
API Reference文档地址:/docs/API_Reference/html/group__controllers.html (opens new window)
# 2. controller的使用
# 2.1 在模板中使用
我们用page-editor:AddTextController
来举例,来说明如何在模板中使用controller
# a. 在初始化的时候使用
new PDFUI({
fragments: [{
// 要操作的目标组件名
target: 'some-component-name',
// 操作的类型,这里是替换
action: UIExtension.UIConsts.FRAGMENT_ACTION.REPLACE,
// 模板,这里使用`@require-modules`指令来处理懒加载操作
template: `<ribbon-button @controller="page-editor:AddTextController" @require-modules="page-editor"></ribbon-button>`,
}]
});
或者
new PDFUI({
fragments: [{
// 要操作的目标组件名
target: 'some-component-name',
// 操作的类型,这里是替换
action: UIExtension.UIConsts.FRAGMENT_ACTION.REPLACE,
// 模板,这里使用`@async`指令来处理懒加载操作
template: `<ribbon-button @controller="page-editor:AddTextController" @async></ribbon-button>`,
}]
});
# b. 在初始化之后使用
// 初始化之后,使用`Component.after`方法在组件后面添加组件
var someComponent = await pdfui.getComponentByName('some-component-name');
someComponent.after(`<ribbon-button @controller="page-editor:AddTextController"></ribbon-button>`);
# 2.2 在配置中使用
我们用AddImageController来举例,来说明如何用配置的方式来使用controller
new PDFUI({
fragments: [{
// 要操作的目标组件名,需要在模板中提前定义
target: 'some-component-name',
config: {
// 指定controller
callback: UIExtension.controllers.AddImageController
}
}]
});
# 3. addons中的controller使用上的限制
- addons中的controller无法使用配置的方式来使用,只能通过模板的方式来使用。因为addon是异步加载的,在配置的时候,addons中的controller还没有加载,所以无法使用配置的方式来使用,只能通过模板的方式来使用,因为模板是在addon加载完成之后才会加载。
- addons中的controller无法通过
UIExtension.controllers.SomeController
的方式访问,因为addon是异步加载的,无法将addons中的controller暴露在UIExtension.controllers
上。