我将如何在指令中添加自定义过滤器？答案

【问题标题】：How would I go about adding a custom filter in a directive?我将如何在指令中添加自定义过滤器？
【发布时间】：2018-02-17 14:37:54
【问题描述】：

所以我对 Angular Js 还是很陌生。我正在尝试完成一个简单的问题。我只需要截断一串文本。我知道有 limitTo 过滤器，我可以将它附加到一个元素，但这需要是动态的。

这里也是笔的链接 codepen.io/Brushel/pen/QMXPWN?editors=1010

【问题讨论】：

您应该将代码写入帖子而不是插入图片
@alexander.polomodov 出于某种原因，它正在格式化 HAML 真的很奇怪。不过谢谢你，我会在以后的帖子中记住这一点
@ThomasBrushel 你想用自定义过滤器完成什么？
什么需要动态？过滤器限制？它已经是动态的
@NarenMurali 基本上我要做的是创建一个截断指令，在达到一定数量的字符后截断文本。该指令应该能够将字符数或宽度传递给它，然后添加截断，并且应该显示某种链接来扩展它或指向页面的链接以显示完整的细节。还应该有一个选项不显示链接并使其仅显示省略号。这对于用户名可能过长的头像很重要，我们可能需要将其删除。

标签： javascript angularjs angularjs-directive haml

【解决方案1】：

这是一个实现所有要求的简单示例，使用此模板来构建您的指令。

Codepen Demo

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
  }

});

【讨论】：