Question

我希望有一个指令来格式化它呈现的提供值，并且此格式化逻辑是该指令的一部分，而不依赖于HTML属性或父控制器。

我使用单个属性和标记的简化尝试看起来像这样，但会出现TypeError: definition.match is not a function错误。

app.directive('timeSpan', function() {
  scope: {
    value: '@value',
    displayValue: function(v) {
      return v / 1000.0;
    },
    displayUnits: function(v) {
      return 'seconds';
    },
    replace: true,
    template: '<span>{{value|displayValue}} {{value|displayUnits}}</span>'
  }
}

<time-span value="{{timer}}" />

Answer 1

我的解决方案是为您的指令创建一个控制器，并在该控制器内声明您的displayUnits和displayValue函数。

.directive('timeSpan', function() {
  return {
      scope: {
        value: '@value'
      },
      replace: true,
      template: '<span>{{displayValue(value)}} {{displayUnits(value)}}</span>',
      controller: 'TimeSpanCtrl',
  };
})
.controller('TimeSpanCtrl', ['$scope', function ($scope) {

    $scope.displayValue = function(v) {
      return v / 1000.0;
    };

    $scope.displayUnits = function(v) {
      return 'seconds';
    }
}]);

此post

中的类似问题

AngularJS在指令中自定义过滤器以格式化值

1 个答案: