Ручное переключение по ссылке с ng-repeat

Question

У меня есть угловое приложение, которое использует 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> 

Я также построил директиву, которую я хочу использовать, чтобы применить класс для всей тра в зависимости от значения некоторых данных. Я хотел использовать ссылку, чтобы сделать это вместо использования $ 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.

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

Answer 1

Я одурманен, почему вы требуете transclude. Я думаю this is what you're looking for; однако я должен сказать, что я не уверен в том, что здесь наблюдается экономия $ watch over $ watch.

за $ наблюдать, я добавил следующее ТР:

<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"); 
      });    
     } 
    } 
    } 

Answer 2

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

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

EDIT

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

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

Answer 3

Установка transclude к ложным в своей директиве даст вам весь список.

Answer 4

Если вы хотите запустить другую настраиваемую директиву 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'); 
     } 
    } 
}