2016-11-22 3 views
0

を使用している場合、ウィンドウオブジェクトへのjQueryを追加する方法 - polyfill.ts、vendor.tsとmain.ts. - 私は3エントリファイルを持っているhttps://angular.io/docs/ts/latest/guide/webpack.html私はNG1にNG2のWebPACKのガイドバックポートされている角度、typescriptです、WebPACKの

をこれは、webpackがブラウザにそれらをロードする方法です。開発ワークフローは本当によく働いているが、jqueryの/ $ではないので、唯一のものであるmain.ts

import 'jquery'; 
import 'angular'; 
import 'angular-ui-router'; 
import 'angular-ui-bootstrap'; 
import 'angular-loading-bar'; 
import 'checklist-model'; 
import 'restangular'; 
import 'lodash'; 
import 'moment'; 
import 'bootstrap-datepicker'; 

と、次のvendor.tsするには、以下の

import "./styles/main.scss"; 

import app from './app'; 
import * as $ from 'jquery'; 

var datepicker = $.fn.datepicker.noConflict(); 
$.fn.bootstrapDP = datepicker; 

angular.bootstrap(document, [app], { 
    strictDi: true 
}); 

Iが追加されましたjqLit​​eが代わりに使用されているので、jqueryプラグインを使用するのが難しくなります。以下は、私はES5を使用している他のプロジェクトから移植されてきた私の日付ピッカーディレクティブがある:

export function DatePickerDirective($timeout: ng.ITimeoutService): ng.IDirective { 
    'ngInject'; 

    return { 
     restrict: 'A', 
     require: '?ngModel', 
     link: link 
    }; 

    function link(scope: any, element: any, attrs: any, ngModel: any) { 
     'ngInject'; 

     $timeout(function() { 
      element.bootstrapDP({ 
       format: 'dd/mm/yyyy', 
       forceParse: true, 
       autoclose: true, 
       todayBtn: 'linked', 
       todayHighlight: true, 
       daysOfWeekHighlighted: [0, 6] 
      }); 

     }); 

     scope.$on('$destroy', function() { 
      element.bootstrapDP('remove'); 
     }); 

    } 

} 

「要素が」jqLit​​eを参照しているので、それが.bootstrapDPプロパティを見つけることができません。角度を使用してjqueryを作成するためにtypescriptまたはwebpackを設定する方法はありますか?

+0

に依存したくなかった:{jQueryの「jQueryの」}'、それが解決しない場合それだけで、それをあなたのhtml( '

関連する問題