Я пишу директиву для интеграцииSlickGrid с моим угловым приложением. Я хочу иметь возможность настроить столбцы SlickGrid с угловым шаблоном (вместо функции форматирования). Для этого мне нужна директива для динамического создания функций форматирования, которые возвращают HTML в виде строки.

Мой подход состоял в том, чтобы создать временную область, связать шаблон с этим, захватить HTML, а затем уничтожить область. Это работает, но жалуется, что$digest already in progress, Есть ли способ, которым я могу визуализировать угловой шаблон таким образом, изолированный от глобального цикла $ digest?

Кстати: я пытался использовать $ interpolate, который прекрасно работает, но нет поддержкаng-repeat или другие директивы.

var columnsConfig = [
  {
    id: "name", 
    name: "Name", 
    field: "name", 
    template: '<a href="{{context.url}}">{{value}}</a>'
  },
  {
    id: "members", 
    name: "Members", 
    field: "members", 
    template: '{{m}}'
  }
];

myModule.directive('SlickGrid', ['$compile', function($compile) {
  return {
    restrict: 'E',
    scope: {
      model: '='
    },
    link: function(scope, element, attrs) {
      var columns = angular.copy(columnsConfig);

      // Special Sauce: Allow columns to have an angular template
      // in place of a regular slick grid formatter function
      angular.forEach(columns, function(column){
        var linker;

        if (angular.isDefined(column.template)) {
          linker = $compile(angular.element('' + column.template + ''));
          delete column.template;

          column.formatter = function(row, cell, value, columnDef, dataContext) {
            var cellScope = scope.$new(true);
            cellScope.value = value;
            cellScope.context = dataContext;

            var e = linker(cellScope);
            cellScope.$apply();
            cellScope.$destroy();

            return e.html();
          };
        }
      });

      var options = {
        enableColumnReorder: false,
        enableTextSelectionOnCells: true,
        autoHeight: true
      };

      var dataView = new Slick.Data.DataView();
      var grid = new Slick.Grid(element, dataView, columns, options);

      dataView.onRowCountChanged.subscribe(function (e, args) {
        grid.updateRowCount();
        grid.render();
      });

      dataView.onRowsChanged.subscribe(function (e, args) {
        grid.invalidateRows(args.rows);
        grid.render();
      });

      scope.$watch('model', function(data) {
        if (angular.isArray(data)) {
          dataView.setItems(data);
        }
      });
    }
  };
}]);