AngularJS фильтр с несколькими аргументами

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. Вы должны создать директиву.

Есть 2 пример директивы:

Первый:

.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> 

Вы можете расширить их, как пожелаете.

Предлагаемые работы: http://plnkr.co/edit/uO9uYqcqLPuqAhJdtJ9m?p=preview