response.text().then(text => {
   this.scriptContainer.nativeElement.innerHTML = text;
   this.editor = ace.edit(this.scriptContainer.nativeElement);
   this.editor.setReadOnly(true);
   this.editor.getSession().setMode('ace/mode/javascript');
   this.changeDetector.detectChanges();
 });

        link: function (scope, element, attrs, ctrl) {
            const editor = ace.edit('json-editor');
            editor.getSession().setMode('ace/mode/json');
            editor.setTheme('ace/theme/dawn');
            editor.setShowPrintMargin(false);

            timesketchApi.getCurrentQuery(scope.sketchId, scope.query, scope.filter, scope.queryDsl)
                .success(function (data) {
                    let currentQueryDsl = data['objects'][0];
                    // If there is no current query create a generic query.
                    if (!currentQueryDsl) {
                        currentQueryDsl = {
                            'query': {
                                'filtered': {
                                    'query': {
                                        'query_string': {
                                            'query': scope.query}}}},
                            'sort': {
                                'datetime': 'asc'},
                        };
                    }
                    scope.queryDsl = currentQueryDsl;
                    editor.setValue(JSON.stringify(currentQueryDsl, null, '\t'), -1);
                    editor.focus();
                });

            scope.executeQuery = function () {
                scope.queryDsl = editor.getValue();
                ctrl.search(scope.query, scope.filter, scope.queryDsl);
            };

            scope.clearEditor = function () {
                scope.queryDsl = '';
                editor.setValue('');
            };
        },

function link(scope: any, elem: any, attrs: any) {
  // Options
  const langMode = attrs.mode || DEFAULT_MODE;
  const maxLines = attrs.maxLines || DEFAULT_MAX_LINES;
  const showGutter = attrs.showGutter !== undefined;
  const tabSize = attrs.tabSize || DEFAULT_TAB_SIZE;
  const behavioursEnabled = attrs.behavioursEnabled ? attrs.behavioursEnabled === 'true' : DEFAULT_BEHAVIORS;
  const snippetsEnabled = attrs.snippetsEnabled ? attrs.snippetsEnabled === 'true' : DEFAULT_SNIPPETS;

  // Initialize editor
  const aceElem = elem.get(0);
  const codeEditor = ace.edit(aceElem);
  const editorSession = codeEditor.getSession();

  const editorOptions = {
    maxLines: maxLines,
    showGutter: showGutter,
    tabSize: tabSize,
    behavioursEnabled: behavioursEnabled,
    highlightActiveLine: false,
    showPrintMargin: false,
    autoScrollEditorIntoView: true, // this is needed if editor is inside scrollable page
  };

  // Set options
  codeEditor.setOptions(editorOptions);
  // disable depreacation warning
  codeEditor.$blockScrolling = Infinity;
  // Padding hacks
  (codeEditor.renderer as any).setScrollMargin(10, 10);
  codeEditor.renderer.setPadding(10);

  setThemeMode();
  setLangMode(langMode);
  setEditorContent(scope.content);

  // Add classes
  elem.addClass('gf-code-editor');
  const textarea = elem.find('textarea');
  textarea.addClass('gf-form-input');

  if (scope.codeEditorFocus) {
    setTimeout(() => {
      textarea.focus();
      const domEl = textarea[0];
      if (domEl.setSelectionRange) {
        const pos = textarea.val().length * 2;
        domEl.setSelectionRange(pos, pos);
      }
    }, 100);
  }

  // Event handlers
  editorSession.on('change', e => {
    scope.$apply(() => {
      const newValue = codeEditor.getValue();
      scope.content = newValue;
    });
  });

  // Sync with outer scope - update editor content if model has been changed from outside of directive.
  scope.$watch('content', (newValue: any, oldValue: any) => {
    const editorValue = codeEditor.getValue();
    if (newValue !== editorValue && newValue !== oldValue) {
      scope.$$postDigest(() => {
        setEditorContent(newValue);
      });
    }
  });

  codeEditor.on('blur', () => {
    scope.onChange();
  });

  scope.$on('$destroy', () => {
    codeEditor.destroy();
  });

  // Keybindings
  codeEditor.commands.addCommand({
    name: 'executeQuery',
    bindKey: { win: 'Ctrl-Enter', mac: 'Command-Enter' },
    exec: () => {
      scope.onChange();
    },
  });

  function setLangMode(lang: string) {
    ace.acequire('ace/ext/language_tools');
    codeEditor.setOptions({
      enableBasicAutocompletion: true,
      enableLiveAutocompletion: true,
      enableSnippets: snippetsEnabled,
    });

    if (scope.getCompleter()) {
      // make copy of array as ace seems to share completers array between instances
      const anyEditor = codeEditor as any;
      anyEditor.completers = anyEditor.completers.slice();
      anyEditor.completers.push(scope.getCompleter());
//.........这里部分代码省略.........