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> 

가 나는 또한 일부 데이터의 값에 따라 전체 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에 재현되었습니다.

문제가있는 위치에 대한 아이디어가 있습니까? 많은 감사. 당신이 당신의 내용에 따라 클래스를 추가하려면 사용할 수

Answer 1

. 나는 생각한다 this is what you're looking for; 그러나 나는 $ 시계를 관찰하는 경제에 대해 확신하지 못한다고 말해야한다.

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

와 지시어는 어떤 조건에 클래스의 변화를 보여줍니다 관찰 $를 들어

, 나는하여 TR에 다음을 추가했습니다.

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

Answer 3

지시문에서 transclude를 false로 설정하면 전체 목록이 제공됩니다.

Answer 4

작성한 다른 사용자 정의 ng-repeat 지정 문을 실행하려면 ng-repeat 지정 문에 다른 우선 순위를 설정할 수 있습니다. 기본 ng-repeat 지시문보다 낮은 우선 순위는 기본 ng-repeat 이후에 실행되게합니다. 내가 샘플로 jsFiddle를 업데이트 한

, 당신은 transclude을 필요로하는 이유 나는 어리둥절하고 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'); 
     } 
    } 
}