# # 如何使用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使用上的限制

1. addons中的controller无法使用配置的方式来使用，只能通过模板的方式来使用。因为addon是异步加载的，在配置的时候，addons中的controller还没有加载，所以无法使用配置的方式来使用，只能通过模板的方式来使用，因为模板是在addon加载完成之后才会加载。
2. addons中的controller无法通过`UIExtension.controllers.SomeController`的方式访问，因为addon是异步加载的，无法将addons中的controller暴露在`UIExtension.controllers`上。