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

在指令中将transclude设置为false将为您提供整个列表。

Answer 2

我很困惑为什么你要求转换。我想this is what you're looking for;但是我不得不说我不相信$观察超过$ watch的经济性。

对于$ observe，我已将以下内容添加到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");
          });              
       }
    }
  }

Answer 3

如果您只想根据内容添加课程，可以使用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>

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

手动转换与ng-repeat的链接

4 个答案: