Angular Js 2 не загружает внутренние файлы сценариев построителя запросов jquery

Мое требование

Необходимо загрузить построитель запросов jquery внутри модального окна, используя машинописный текст angularjs 2.

Что я наделал

Я создал динамические формы в angularjs 2, которые содержат 3 поля выбора и 1 текстовое поле, в текстовом поле по щелчку этого я вызвал модальный бутстрап внутри модального тела. Я закодировал построитель запросов и создал внутренний java скрипт для этого построителя запросов внутри template_rule.html

Что творится

когда я нажимаю на текстовое поле, появляется модальное всплывающее окно, и внутри модального тела отображаются только три кнопки, а основной вид построителя запросов не отображается.

это полностью рабочая демонстрационная ссылка (http://plnkr.co/edit/d38iwjLhJzTjM5t46zD7?p=preview )

Функциональность демонстрационной ссылки

в этой ссылке будет кнопка в верхнем левом углу, нажмите, чтобы она продолжала добавлять набор полей, в этом наборе полей будет текстовое поле, если вы щелкнете это текстовое поле, появится модальное окно, только в этом Я отображаю построитель запросов, кнопки будут отображаться, но часть основных функций не отображается в этом модальном всплывающем окне, сценарий построителя запросов находится в файле app/template_rule.html, а необходимые библиотеки включены в файл index.html, пожалуйста помогите мне решить это

это часть кода для полного рабочего кода, пожалуйста, обратитесь по ссылке выше

import {Component} from 'angular2/core';
import {
        FORM_DIRECTIVES, FormBuilder, ControlGroup, ControlArray, Validators, NgForm, Control,
            AbstractControl
    }from 'angular2/common';

@Component({
selector: 'my-app',
templateUrl:'app/template_rule.html',
directives: [FORM_DIRECTIVES]
})
export class AppComponent {
userForm: ControlGroup;
constructor(private fb: FormBuilder) {
this.userForm = fb.group({
  rules_list:  new ControlArray([])
    });
    this.rules_list();
 }

 rules_list(){
    this.userForm.controls['rules_list'].push(this.fb.group({
        select_state: this.fb.control("",Validators.required),
        rules: this.fb.control("", Validators.required),
        pass_state: this.fb.control("", Validators.required),
        fail_state: this.fb.control("", Validators.required)
    }));
}

removeRules(ctrl) {
     let rulesLists = (<Array>(<ControlGroup>this.userForm.controls['rules_list']).controls);
    for(var i = 0; i < rulesLists.length; i++) {
         console.log("each rules", ctrl);
        if(rulesLists[i] == ctrl) {
         console.log("rules to remove", rulesLists[i]);
            rulesLists.splice(i, 1);
            (<ControlGroup>this.userForm.controls['rules_list']).updateValueAndValidity();
         break;
        }
    }
}

submitRules() {
     console.log(this.userForm.value)
    }
}

angular jquery query-builder
person balajivaishnav    schedule 28.06.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Эта проблема решена путем динамической загрузки файла сценария построителя запросов в angular 2 при загрузке шаблона.

ниже приведен код для динамической загрузки

load_script(){
var head=document.getElementByTagName('head')[0];
var script=document.createElement('script');
script.type='text/javascript';
script.src='js file url'
head.appendChild(script);
}
person balajivaishnav    schedule 28.06.2016