Angular 或 Angularjs 中的 JQuery 插件答案

【问题标题】：JQuery plugins in Angular or AngularjsAngular 或 Angularjs 中的 JQuery 插件
【发布时间】：2017-06-12 11:07:08
【问题描述】：

我经常听到并读到我们不应该将JQuery 与Angularjs 一起使用。但是如果我想使用一些 Angularjs 中不可用的 JQuery plugins 怎么办。目前，我对这些示例一无所知，但如果我遇到这种情况怎么办？如何继续使用 jquery 插件？最好的方法是什么？

更新

比如JQuery slick的功能比Angular Carousel多，像这样的情况，不是每个人都想自己开发，经常想用功能更多的插件。

【问题讨论】：

标签： jquery angularjs jquery-plugins

【解决方案1】：

到目前为止，我们在生产环境中使用 Angular2 + jQuery 已经 9 个月了。它真的一点问题都没有。我们的案例 - 用于 jQuery 的 Kendo。它有很多很好的控件，我们很乐意使用它们。 Kendo for Angular2 现在不提供大部分 Kendo for jQuery。您可能会在下面看到示例代码。

     private initialize() {
        let instance = this;

        const data = instance.events.map((event) => {
            return {
                end: new Date(Date.parse(event.to)),
                id: event.id,
                start: new Date(Date.parse(event.from)),
                title: event.name,
                description: event.name
            };
        });

        const dataSource = new kendo.data.SchedulerDataSource({ data });

        const schedulerDate = new Date(instance.date.getTime());
        schedulerDate.setHours(0);
        schedulerDate.setMinutes(0);
        schedulerDate.setSeconds(0);

        const startDate = new Date(schedulerDate.getTime());
        startDate.setHours(this.applicationSettings.workStartTimeMinutes / 60);
        const finishDate = new Date(schedulerDate.getTime());
        finishDate.setHours(this.applicationSettings.workEndTimeMinutes / 60);

        const finalOptions: kendo.ui.SchedulerOptions = {
            dataSource: data,
            date: schedulerDate,
            views: ['day'],
            startTime: startDate,
            endTime: finishDate,
            footer: false,
            editable: false,
            majorTimeHeaderTemplate: kendo.template('#=kendo.toString(date, "HH:mm")#'),
        };

        const jqElement = $(instance._schedulerContainer.element.nativeElement);
        let existingGrid = <kendo.ui.Scheduler>jqElement.data('kendoScheduler');
        if (existingGrid) {
            existingGrid.destroy();
        }

        instance._kendoScheduler = <kendo.ui.Scheduler>jqElement.kendoScheduler(finalOptions).data('kendoScheduler');

        instance._kendoScheduler.wrapper.on('mousedown', 'div.k-event', function (e) {
            const uid = $(e.currentTarget).data('uid');
            const event = instance._kendoScheduler.occurrenceByUid(uid);
            instance._augmentedReality.openTask2(event.id);
        });
    }

如您所见，没什么特别的。如果您使用 typescript，请使用 @types/kendo-ui 包为您提供帮助。

【讨论】：

【解决方案2】：

一般来说，我会改写关于不将 jQuery 与 AngularJS 一起使用的声明——这并不是说您“不应该将 jQuery 与 AngularJS 一起使用”。就是如果你想利用框架的力量，你需要考虑你的问题，你的视图只是数据模型的可视化显示，并且你可以根据需要操作该数据模型并让框架根据需要更新视图。

这与 jQuery 形成鲜明对比，在大多数情况下，您必须从操纵用户界面的角度来考虑问题，以便它执行您想要的操作。

由于不同的思维方式，在您很好地掌握 AngularJS 解决问题的方法之前，最好不要再使用 jQuery 来解决问题。但是，一旦你有了这个心智模型，AngularJS 就有了根据你的需要利用 jQuery 插件的钩子。但在构建该心智模型之前，使用 jQuery 解决问题会妨碍您学习如何正确利用该框架。

对于很多人来说，在你学会了如何用不同的思维方式思考你的问题之后，你就会意识到你实际上对 jQuery 的需求是多么的少，除非你尝试使用现有的插件。（您还注意到如何快速构建许多简单 jQuery 插件的自己的 AngularJS 版本。

【讨论】：