使用Angular，TypeScript，Webpack时如何向窗口对象添加jQuery [英] How to add jquery to window object when using angular, typescript, webpack

问题描述

我已将ng2 Webpack指南反向移植到ng1- https://angular .io/docs/ts/latest/guide/webpack.html

I have backported the ng2 webpack guide to ng1 - https://angular.io/docs/ts/latest/guide/webpack.html

我有3个入口文件-polyfill.ts，vendor.ts和main.ts.这是webpack将它们加载到浏览器中的方式.我已将以下内容添加到vendor.ts

I have 3 entry files - polyfill.ts, vendor.ts and main.ts. This is the way webpack loads them into the browser. I have added the following to vendor.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';

以及以下内容到main.ts

and the following to main.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
});

开发工作流程确实运行良好，但是唯一的原因是，当角度加载时，jquery/$不在窗口对象上，因此使用jqLit​​e代替，这使我很难使用jquery插件.下面是我从另一个使用ES5的项目中移植的日期选择器指令:

The development workflow is working really well but the only thing is because jquery/$ is not on the window object when angular loads, jqLite is used instead which makes it hard for me to use jquery plugins. Below is my date picker directive that I have ported from another project that is using 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属性.有没有一种方法可以设置打字稿或Webpack来使jquery成为有角度的使用?

The 'element' is referring to jqLite and hence it can't find the .bootstrapDP property. Is there a way to setup typescript or webpack to make angular uses jquery?

推荐答案

我最终将以下内容添加到我的main.ts中，并消除了日期选择器上的无冲突.

I ended up adding the following to my main.ts and getting rid of the no conflict on the datepicker.

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

declare var window : any; <--- THIS LINE
window.$ = window.jQuery = $; <--- AND THIS LINE

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

感觉仍然有些粗糙，但我不想依赖任何CDN

It stills feels a bit gross but I didn't want to rely on any CDN's

这篇关于使用Angular，TypeScript，Webpack时如何向窗口对象添加jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！