我已将 ng2 webpack 指南反向移植到 ng1 - https://angular.io/docs/ts/latest/guide/webpack.html
我有 3 个入口文件 - polyfill.ts、vendor.ts 和 main.ts。这是 webpack 将它们加载到浏览器中的方式。我已将以下内容添加到 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
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
});
开发工作流程运行得非常好,但唯一的问题是因为当 Angular 加载时 jquery/$ 不在窗口对象上,而是使用 jqLite,这让我很难使用 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');
});
}
}
“元素”指的是 jqLite,因此它找不到 .bootstrapDP 属性。有没有一种方法可以设置 typescript 或 webpack 来使 Angular 使用 jquery?
最佳答案
我最终将以下内容添加到我的 main.ts 中并摆脱了日期选择器上的无冲突。
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
关于jquery - 使用angular,typescript,webpack时如何将jquery添加到窗口对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40732787/