javascript - 是否可以创建一个强加 Angular 过滤器的 css 类？

Question

是否可以创建一个强加 Angular 过滤器的 css 类？

例如，我想让一个表格单元格显示一个值，该值始终右对齐，颜色为矢车菊蓝色，并使用 Angular 过滤器进行格式化(在本例中我将选择货币)。

我目前让它与以下 CSS 一起工作:

.money {
    text-align: right;
    color: #6495ed;
}

还有这个模板:

<td class="money">{{myContract.amountOfMoney | currency:default:0}}</td>

有没有办法缩短这个时间，以便可以通过 CSS 应用 CSS 和 Angular 过滤器？

Answer 1

如评论中所述，您可以使用 restrict: 'C' 创建货币指令。

这里唯一的技巧是使用 $timeout 来确保我们使用 element.text() 获得计算的表达式。

请查看下面的演示或此 fiddle .

angular.module('demoApp', [])
  .controller('MainController', function($scope) {
    $scope.myContract = {
      amountOfMoney: 100
    };
  })
  .directive('money', function(currencyFilter, $timeout) {
    return {
      restrict: 'C',
      link: function(scope, element, attrs) {
        $timeout(function() { //timeout to ensure that the expression is evaluated
          var value = element.text();
          //console.log(currencyFilter(parseFloat(value) || 0, undefined, 0));
          element.text(currencyFilter(parseFloat(value), undefined, 0));
        }, 0);
      }
    };
  });

.money {
  text-align: right;
  color: #6495ed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="demoApp" ng-controller="MainController">
  <p>{{myContract.amountOfMoney | currency:default:0}}</p>
  <p class="money">{{myContract.amountOfMoney}}</p>
</div>