HTML с директивами Angular не работает при добавлении

Я использую ng-grid с плагином csv, слегка измененным для поддержки Internet Explorer. Плагин создает ссылку и добавляет ее в нужное место в сетке. До моих изменений ссылка работала нормально, но не использовала никаких директив, только html. Теперь я использую директиву ng-csv, которая вообще не отвечает, хотя кнопка появляется, и html выглядит правильно при проверке. При нажатии кнопки должен быть загружен csv - прямо сейчас только с тестовыми данными, числами 5, 4 внутри.

Соответствующий код из функции ngGridCsvExportPlugin:

    var fp = grid.$root.find(".ng-grid-buttons");
    var csvDataLinkPrevious = grid.$root.find('.ng-grid-buttons .csv-data-link-span');
    var csvDataLinkPrevious2 = grid.$root.find('.ngHeaderButton2');
    if (csvDataLinkPrevious != null) {csvDataLinkPrevious.remove(); csvDataLinkPrevious2.remove(); }
    var csvDataLinkHtml = "<div class='ngHeaderButton2'></div>";
    csvDataLinkHtml += "<span type='button' ng-csv='[\"5\",\"4\"]' ng-hide='true' filename='data.csv' class='csv-data-link-span'><i class='fa fa-file-excel-o excel-icon'></i></span>";
    fp.append(csvDataLinkHtml);

Используя следующий код, я могу внедрить скомпилированный HTML-код и увидеть, что он находится в DOM с помощью инструментов разработки, но я не вижу саму кнопку на странице:

 $(function() {
      angular.element(document).injector().invoke(function($rootScope, $compile) {
        var link = $compile(csvDataLinkHtml);
        csvDataLinkHtml = link(scope);
        fp.append(csvDataLinkHtml);
      });
    });

csv javascript html angularjs ng-grid
person Daniel Bogart    schedule 23.03.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Похоже, вам нужно скомпилировать добавленный HTML и связать его с областью действия. Ознакомьтесь с документацией для $compile.

$compile возьмет элемент HTML или DOM и создаст шаблонную функцию, которую затем можно связать с областью видимости.

Вы можете сделать что-то вроде этого:

var link = $compile(csvDataLinkHtml);
csvDataLinkHtml = link(scope); // or whatever scope you want to attach to
fp.append(csvDataLinkHtml);
person Bill Bergquist    schedule 23.03.2015
comment
это внутри функции плагина, которая не является угловым модулем, поэтому я не могу просто вставить туда $compile. знаете, как внедрить в такой файл? - person Daniel Bogart; 24.03.2015
comment
Что ж, в вашем обновленном примере я не вижу, чтобы вы где-нибудь определяли fp. Я предполагаю, что нужно обновить. В противном случае вы могли бы сгенерировать событие из кода плагина, которое сообщает директиве Angular захватить и скомпилировать некоторый HTML. - person Bill Bergquist; 24.03.2015
comment
Nvm, нашел там ng-hide. Понял, спасибо, Билл. - person Daniel Bogart; 24.03.2015
comment
Без проблем! Рад, что смог помочь. - person Bill Bergquist; 24.03.2015