Question

我有一个表格，我想要突出显示一行，并在满足某些输入时显示警告符号。我为此做了一个指示。

<tr ng-repeat="size in resource.sizes" check-diameter size="size">
 <td><i class="fa fa-warning"></i>{{size.title}}</td>
 <td>{{size.inner}}</td>
 <td>{{size.outer}}</td>
</tr>

.directive('checkDiameter', function () {
    return {
      restrict: 'A',
      scope: {
        size: '='
      },
      link: function(scope, element, attrs){
        scope.$watch('size', function(){
          if(scope.size.inner > scope.size.outer){
            element.addClass('warning');
          }
        }, true);

      }
    };

现在它突出显示了这一行。但是，我如何使指令显示/添加警告符号<i class="fa fa-warning"></i>？

通常情况下我会使用ng-hide但是我正在使用控制器来查看几个视图，因此我需要将所有内容都放在指令中以保持模块化。

Answer 1

您只需要使用ng-class在您想要的元素中添加类。如果你想隐藏一个元素，你需要使用css。

HTML：

<tr ng-repeat="size in resource.sizes" ng-class="{warning: size.inner > size.outer}">
 <td><i class="fa fa-warning warning-message"></i>{{size.title}}</td>
 <td>{{size.inner}}</td>
 <td>{{size.outer}}</td>
</tr>

JS：

.directive('checkDiameter', function () {
    return {
      restrict: 'A',
      scope: {
        size: '='
      },
      link: function(scope, element, attrs){
        scope.$watch('size', function(){
          if(scope.size.inner > scope.size.outer){
            element.addClass('warning');
          }
        }, true);

      }
    };

在你的css中：

.warning-message {
  display: none;
}
.warning .warning-message {
 display: block;
}

使用angular指令添加类并显示/添加元素

1 个答案: