# # 如何使用 addons 中的 controller

## # API 预览

Foxit PDF SDK for Web 中的 controller 都可以在 API Reference 文档的 "Modules > UIExtension > controllers" 部分找到。其中，定义在 addons 中的 controller 都汇总在 "Modules > UIExtension > controllers > UIXAddon" 部分。

API Reference文档地址：/docs/API_Reference/html/group__controllers.html
(opens new window)

## # controller 的使用

### # 在模板中使用 controller

以 `page-editor:AddTextController` 为例来说明如何在模板中使用 controller.

#### # 在初始化过程中使用 controller

    new PDFUI({
        fragments: [{
            // The target element to be manipulated
            target: 'add-text',
            // The type of operation, here is replacement
            action: UIExtension.UIConsts.FRAGMENT_ACTION.REPLACE,
            // Template，here the "@require-modules" directive is used to handle lazy loading
            template: `<ribbon-button @controller="page-editor:AddTextController" @require-modules="page-editor"></ribbon-button>`,
        }]
    });

或者

    new PDFUI({
        fragments: [{
            // The target element to be manipulated
            target: 'add-text',
            // The type of operation, here is replacement
            action: UIExtension.UIConsts.FRAGMENT_ACTION.REPLACE,
            // Template，here the "@async" directive is used to handle lazy loading
            templage: `<ribbon-button @controller="page-editor:AddTextController" @async></ribbon-button>`,
        }]
    });

#### # 在初始化之后使用 controller

    // After initialization, use the "Component.after" method to add elements after the component
    var someComponent = await pdfui.getComponentByName('some-component-name');
    someComponent.after(`<ribbon-button @controller="page-editor:AddTextController"></ribbon-button>`);

### # 在配置中使用 controller

我们以 `AddImageController` 为例，说明如何以基于配置的方式使用 controller。

    new PDFUI({
        fragments: [{
            // The target element to be manipulated
            target: 'image-tool',
            config: {
                // Specify the controller
                callback: UIExtension.controllers.AddImageController
            }
        }]
    });

## # 在 addons 中使用 controller 的限制

1. addons 中的 controller 不能以基于配置的方式使用，只能通过模板使用。这是因为 addon 是异步加载的，当进行配置时，addons 中的 controller 尚未加载完成。因此，只能通过模板来使用，模板是在 addon 加载完成之后才会加载。

2. addons 中的 controller 不能通过 `UIExtension.controllers.SomeController` 的方式访问。因为 addon 是异步加载的，无法将 addons 中的 controller 暴露在 `UIExtension.controllers` 上。