Ручной transclude в связи с ng-repeat

0

У меня есть угловое приложение, которое использует ng-repeat-start для отображения некоторой динамической информации.

<div>
  <table>
    <tbody>
      <tr my-directive ng-repeat="data in vm.data">
        <td ng-bind="data.id"></td>    
        <td ng-bind="data.id"></td>    
      </tr>
        <tr ng-repeat-end>
        <td>extrarow</td>
      </tr>
    </tbody>
  </table>
</div>

Я также создал директиву, которую я хочу использовать для применения класса ко всему tr в зависимости от значения некоторых данных. Я хотел использовать ссылку, чтобы сделать это вместо использования $ watch.

Поскольку сам может содержать много внутри, я хотел использовать transclude для этого. Я не хочу, чтобы тег был вставлен в мой стол, так как это разбивает все мои стили, поэтому я должен сделать это вручную, примерно так:

function myDirective() {
    return {
       transclude: true,
       scope: {},
       link: function($scope, $element, $attrs, $ctrl, $transclude) {
          var cloned = $transclude();
          $element.append(cloned);              
       }
    }
}

Проблема в том, что это не работает должным образом. Клонированный объект присоединяется только к последней строке ng-repeat. Вероятно, это связано с объектом $ element, но я не уверен в этом.

Я воспроизвел проблему в этом jsfiddle.

Есть идеи о том, где проблема? Большое спасибо.

  • 0
    Не уверен, что вы пытаетесь достичь, но удалите transclude: true из вашей директивы, jsfiddle.net/tf9s7skq/1 Если вы просто пытаетесь установить класс TR на основе данных, используйте element.css () - Трансклюзия выглядит здесь как неправильная вещь.
  • 0
    Не уверен насчет того, что делает transclude: false, но вы правы, все мои элементы отображаются, но также ошибка, так как $ transclude больше не является функцией. Кроме того, последняя <td> extrarow </ td> отображается только для последней строки. Кроме того, это простой пример, но в моем приложении у меня действительно большая таблица с несколькими ячейками в строке; вот почему я использую transclude, я не хочу терять эти ячейки при применении директивы.
Показать ещё 1 комментарий
Теги:
angular-directive
angularjs-ng-transclude

4 ответа

1
Лучший ответ

Я одурманен, почему вам нужно перевести. Я думаю, это то, что вы ищете; однако я должен сказать, что я не уверен в том, что здесь наблюдается экономия $ watch over $ watch.

Для $ observ, я добавил следующее в TR:

 <tr my-directive data-value="{{data.id}}" ng-repeat="data in vm.data">

и директива демонстрирует изменение класса при некотором условии.

function myDirective() {
      return {
        link: function($scope, element, attrs) {
          attrs.$observe('value', function(val) {
            if (val && val == "9.2")
              element.addClass("myClass");
            else
              element.removeClass("myClass");
          });              
       }
    }
  }
Поделиться
  • 0
    Спасибо, @RamblinRose, ты был прав; ранее я использовал шаблон, и мне пришлось использовать transclude; Я просто не осознавал, что в этом случае мне больше не нужно.
1

Установка transclude to false в вашей директиве даст вам весь список.

Поделиться
0

Если вы хотите запустить другую настраиваемую директиву ng-repeat, которую вы написали, вы можете установить другой приоритет для своей директивы ng-repeat. Более низкий приоритет, чем директива ng-repeat по умолчанию, заставит его запускать по умолчанию ng-repeat.

Я обновил ваш jsFiddle с помощью примера, https://jsfiddle.net/1x08vxpm/15/

angular.module('app', [])

.controller('Controller', Controller)    
.directive('ngRepeat', ngRepeat);

function ngRepeat() {
    return {    
       priority: 0,
       scope: {},
       link: function($scope, $element, $attrs) {
          $element.css('color', 'red');
       }
    }
}
Поделиться
  • 0
    Я хочу иметь возможность использовать директиву в <tr>, чтобы применять стиль для строк, но также и в <td>, для отдельных ячеек, поэтому я не могу использовать эту. Это хорошая идея для других сценариев, хотя.
0

Если вы просто хотите добавить класс в зависимости от вашего контента, вы можете использовать ng-class

<td ng-bind="data.id" ng-class="{'myClass': data.id > 4}"></td>

РЕДАКТИРОВАТЬ

Вы можете использовать привязку в один раз, тогда вам не нужно много $watchers

<td ng-bind="data.id" ng-class="::{'myClass': data.id > 4}"></td>
Поделиться
  • 0
    Я знаю, я не хочу использовать нг-класс. Я должен повторить что-то подобное много раз в моей таблице, и это добавляет много $$ наблюдателей. Я хочу использовать $ наблюдаю, чтобы сделать это, и поэтому я должен использовать transclude.
  • 0
    Я отредактировал свой пост
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню