这里有新鲜出炉的 AngularJS 开发指南,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
本篇文章主要介绍了详解 angular2 采用自定义指令(Directive)方式加载 jquery 插件 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
由于 angular2 兴起不久,相关插件还是很少,所以有时候不得不用一些 jquery 插件来完成项目,
那么如何把 jquery 插件放到 angular2 中呢?采用自定义指令!
在上下文之前要引入 jquery,这点不再描述
首先创建一个指令,采用 @input 方式,来获取 jquery 插件所需要的参数。
在 ngOnChanges 时,也就是参数通过 @input 传入时,初始化 jquery 插件,
初始化 jquery 插件需要获取 dom 元素,所以我们引入 ElementRef,用来获取 dom 元素
这里需要讲一下,jquery 中回调函数,如果直接使用 this, 回调是无法获取 angular 的函数的
所以这里采用 bind 的形式,把 this 传递进去。这样在 angular 中的函数才会被正确调用。
以下为实现时间插件的代码:
- import {
- Directive,
- Output,
- Input,
- ElementRef,
- EventEmitter
- }
- from '@angular/core';
- // 引入jquery.daterangepicker插件相关JS和CSS,Css打包时需要打包成单个文件,或者直接在html单独引用
- // 如何单独打包请看下节代码
- require('../../../../assets/lib/bootstrap-daterangepicker-master/daterangepicker.js');
- require('../../../../assets/lib/bootstrap-daterangepicker-master/daterangepicker.css');
- // 自定义指令
- @Directive({
- selector: '[dateRangePicker]',
- }) export class DateRangePicker {
- /**
- * jquery.daterangepicker插件所需的参数
- * 参数:http://www.daterangepicker.com/#options
- */
- @Input() public dateRangePickerOptions: IJQueryDateRangePicker;
- // 选中事件
- @Output() selected: any = new EventEmitter();
- /**
- * 初始化
- * @param _elementRef
- */
- constructor(private _elementRef: ElementRef) {}
- /**
- * 属性发生更改时
- * @private
- */
- ngOnChanges() {
- $(this._elementRef.nativeElement).daterangepicker(this.dateRangePickerOptions, this.dateCallback.bind(this));
- }
- /**
- * 时间发生更改时使用emit传递事件
- * @private
- */
- dateCallback(start, end) {
- let format = "YYYY-MM-DD";
- if (this.dateRangePickerOptions.locale.format) {
- format = this.dateRangePickerOptions.locale.format;
- }
- let date = {
- startDate: start.format(format),
- endDate: end.format(format),
- }
- this.selected.emit(date);
- }
- }
- import {
- Component
- }
- from '@angular/core';
- import {
- DateRangePicker
- }
- from '../../theme/directives';@Component({
- selector: 'dashboard',
- template: ` < div class = "form-group" > <label
- for = "startDate" > {
- date.startDate
- } < /label>
- <input
- dateRangePicker
- [dateRangePickerOptions]="option"
- (selected)="dateSelected($event)"
- type="text"
- class="form-control">
- </div > `,
- directives: [DateRangePicker]
- }) export class Dashboard {
- /**
- * 当前选中的时间
- */
- public date: any
- /**
- * jquery时间插件参数
- */
- private option: Object = {
- locale: {
- format: "YYYY-MM-DD",
- separator: " 至 ",
- applyLabel: "确定",
- cancelLabel: '取消',
- fromLabel: '起始时间',
- toLabel: '结束时间',
- customRangeLabel: '自定义',
- daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
- monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
- firstDay: 1
- },
- };
- constructor() {}
- /**
- * emit回调事件,获取选中时间
- * @param date
- */
- dateSelected(date) {
- this.date = date;
- }
- }
另外注意,css 需要另外单独打包,或 html 单独引用,如何打包 css,请看最后,我这里是用 webpack 打包的
- // 采用ExtractTextPlugin单独对jquery插件进行css打包
- loaders: [{
- test: /daterangepicker\.css$/,
- loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
- }]
- plugins: [
- new ExtractTextPlugin('[name].css', {
- allChunks: true
- })]
来源: http://www.phperz.com/article/17/0528/327861.html