2016-12-09 2 views
1

partie de cli.json-angulaire-cli angulaire choisie jquery

"styles": [ 
    "styles.css", 
    "../node_modules/font-awesome/css/font-awesome.css", 
    "../node_modules/bootstrap/dist/css/bootstrap.min.css", 
    "../node_modules/bootstrap-daterangepicker/daterangepicker.css", 
    "../node_modules/bootstrap-chosen/bootstrap-chosen.css" 
], 
"scripts": [ 
    "../node_modules/hammerjs/hammer.min.js", 
    "../node_modules/jquery/dist/jquery.min.js", 
    "../node_modules/bootstrap-chosen/dist/chosen.jquery-1.4.2/chosen.jquery.js" 
    ], 

blaBla.component.html

<div class="col-lg-3"> 
    <select appChosen multiple data-placeholder="Choose a Country" class="chosen chzn-done" tabindex="2"> 
     <option value=""></option> 
     <option value="United States">United States</option> 
     <option value="United Kingdom">United Kingdom</option> 
     <option value="Afghanistan">Afghanistan</option> 
    </select> 
</div> 

blaBla.directive.ts

import { Directive, ElementRef } from '@angular/core'; 
import * as $ from 'jquery'; 

@Directive({ 
    selector: '[appChosen]' 
}) 
export class ChosenDirective { 

    constructor(private el: ElementRef) {} 
    ngAfterViewInit() { 
     $(this.el.nativeElement).chosen({ allow_single_deselect: true }); 
    } 
} 

choisi n'a pas travail erreur dans la console:

__WEBPACK_IMPORTED_MODULE_1_jquery __ (...). Choisie n'est pas une fonction

mais $('.chosen').chosen(); œuvres dans les outils de dev chrome.

Comment est-ce que ceci peut être fixé?

Répondre

0

je trouve la solution ici https://github.com/angular/angular-cli/issues/2760

grâce à twmobius

si elle est ici: -cli.json angulaire

"scripts": [ 
    "../vendor.ts" 
    ], 

de vendor.ts

import * as $ from 'jquery'; 
window['$'] = window['jQuery'] = $; 
require('./node_modules/chosen-js/chosen.jquery.js'); 
+0

ne nécessitent défini/..? –