Question

在我的页面中，我有：

 <h1>{{name | fontResize: 25:42}}</h1>

我有一个过滤器

 angular.module('myApp').filter('fontResize', function () {
                            return function (text, length, end) {
                              if (!text) {
                                return text;
                              }    
                              if (isNaN(length))
                                length = 10;    
                              if (end === undefined)
                                end = "...";    
                              if (text.length <= length || text.length - end.length <= length) {
                                $('h1').css('fontSize', '30px');
                                return text;
                              } else {
                                $('h1').css('fontSize', '12px');
                                return text;
                              }

                            };
                          });

如何为第二个参数设置fontsize（42）？

Answer 1

过滤器不适用于操作DOM。你应该创建一个指令。

有两个示例指令：

第一：

.directive('fontResize', function() {
  return {
    restrict: 'A',
    link: function(scope, elem, attrs) {
      var size = attrs.size || '30px';
      var length = attrs.length || 10;

      attrs.$observe('text', function() {
        var text = attrs.text;
        if (text.length <= length) {
          elem.css('fontSize', size);
        } else {
          elem.css('fontSize', '12px');
        }
        elem.text(attrs.text);
      });
    }
  }
})

HTML：

<h1 font-resize text="{{name}}" size="42px"></h1>

第二个：

.directive('fontResize2', function() {
  return {
    restrict: 'A',
    scope: {},
    link: function(scope, elem, attrs) {
      var size = attrs.size;
      var length = attrs.length || 10;

      scope.$watch(function() {
        return elem.text();
      }, function(newVal, oldVal) {
        setText(newVal)
      })

      function setText(text) {

        if (text.length <= length) {
          elem.css('fontSize', size);
        } else {
          elem.css('fontSize', '12px');
        }
        elem.text(attrs.text);

      }
    }
  }
});

HTML：

<h1 font-resize2 size="60px">{{name}}</h1>

您可以根据需要扩展它们。

以下是plunkr：http://plnkr.co/edit/uO9uYqcqLPuqAhJdtJ9m?p=preview

AngularJS过滤器具有多个参数

1 个答案: