2017-06-12 36 views
0

我經常聽到並讀到我們不應該使用JQueryAngularjs。但是,如果我想使用Angularjs中沒有的JQuery plugins,該怎麼辦? 現在,我對這些例子一無所知,但如果我面對這種情況呢?如何繼續jQuery插件?什麼可能是最好的方法?Angular或Angularjs中的JQuery插件

UPDATE

例如,JQuery slick具有更多的功能比Angular Carousel,情況是這樣的,不是每個人都希望自己開發,往往要使用具有更多功能的插件。

回答

0

到目前爲止,我們在生產中使用Angular2 + jQuery 9個月。它根本不會造成任何問題。我們的案例 - 用於jQuery的Kendo。它有很多很好的控制,我們很樂意使用它們。 Kendo for Angular2現在不提供jQuery的大部分Kendo。您可能會在下面看到示例代碼。

 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); 
     }); 
    } 

正如你所看到的,沒有什麼特別的。如果你使用打字稿然後@types/kendo-ui包的幫助。

0

一般來說,我會改寫有關不使用jQuery與AngularJS這種說法 - 這並不是說你是「不應該使用jQuery與AngularJS」。這就是說,如果你想利用框架的力量,你需要從視圖的角度考慮你的問題,只是作爲數據模型的可視化顯示,並且你可以根據需要操縱數據模型,並讓框架根據需要更新視圖。

這與jQuery的地方,在大多數情況下,你要想想你的問題在操縱用戶界面方面爲它做你想要的。

因爲不同的心理方法的,它通常是一個好主意,停止深遠的jQuery來解決問題,直到您有解決問題的方法AngularJS的把握好。但是,一旦你有了這個心智模型,AngularJS就可以根據需要使用jQuery插件。但在構建心智模型之前,使用jQuery解決問題將會阻止您學習如何正確地利用框架。

對於很多人來說,你學會以後如何看待您的問題,不同的心態,你就會意識到你實際上怎麼一點需要jQuery的,除非你試圖使用現有的插件。 (你也注意到你可以如何快速構建自己的AngularJS版本的許多簡單的jQuery插件)。