How would I go about adding a custom filter in a directive?

Question

So I'm pretty new to Angular Js. I'm trying to accomplish a simple problem. I just need to truncate a string of text. I know there is the limitTo filter and I could just attach it to an element, but this needs to be dynamic.

Here is also a link to the pen codepen.io/Brushel/pen/QMXPWN?editors=1010

Answer 1

Here is a simple example implementing all the requirements, use this template to build your directive.

app.directive('truncate', function() {
  function link(scope, element, attrs){
    console.log(scope.input)
    console.log(scope.maxCharacters)
  }

  return{
    restrict: 'A',
      scope: {
      input: '=',
      maxCharacters: '=',
      href: '=',
      isShowMore: '='
      },
    template: '<h1 ng-init="limit=true;length=maxCharacters">{{input | limitTo: length}}<a ng-attr-href="{{ href ? \'#\': undefined }}" ng-click="limit=!limit;length=limit?maxCharacters: \'\'">{{isShowMore?"Show More":"..."}}</a></h1>',
    link: link
  }

});