dd-collapse-text with emoji filter

Question

我正在使用dd-collapse-text指令可以在我的网页中折叠描述，并且工作正常。

<span data-dd-collapse-text="350" data-ng-bind-html="description"></span> 

结果例（不适用于350个字符）：

Lorem存有......（更多）

但是，现在我想用它的意见;并用表情符号过滤图标。

，这是不工作：

<span data-dd-collapse-text="350" data-ng-bind-html="comment | emoji"></span> 

的结果是一样的，这个代码...所有的注释文本，通过表情符号在图标。

<span data-ng-bind-html="comment | emoji"></span> 

我需要更改或在我的代码中做什么？任何想法？

谢谢。下面我把dd-collapse-text指令。

(function() { 
    'use strict'; 

    angular 
     .module('core') 
     .directive('ddCollapseText', collapseText); 

    collapseText.$inject = ['$compile']; 

    /* @ngInject */ 
    function collapseText($compile) { 
     return { 
      restrict: 'A', 
      replace: true, 
      link: function(scope, element, attrs) { 

       // start collapsed 
       scope.collapsed = false; 

       // create the function to toggle the collapse 
       scope.toggle = function() { 
        scope.collapsed = !scope.collapsed; 
       }; 

       // get the value of the dd-collapse-text attribute 
       attrs.$observe('ddCollapseText', function(maxLength) { 
        // get the contents of the element 
        var text = element.text(); 

        if (text.length > maxLength) { 
         // split the text in two parts, the first always showing 
         var firstPart = String(text).substring(0, maxLength); 
         var secondPart = String(text).substring(maxLength, text.length); 

         // create some new html elements to hold the separate info 
         var firstSpan = $compile('<span>' + firstPart + '</span>')(scope); 
         var secondSpan = $compile('<span ng-if="collapsed">' + secondPart + '</span>')(scope); 
         var moreIndicatorSpan = $compile('<span ng-if="!collapsed">...</span>')(scope); 
         var toggleButton = $compile('<span class="collapse-text-toggle" ng-click="toggle()">{{collapsed ? "less" : "more"}}</span>')(scope); 

         // remove the current contents of the element 
         // and add the new ones we created 
         element.empty(); 
         element.append(firstSpan); 
         element.append(secondSpan); 
         element.append(moreIndicatorSpan); 
         element.append(toggleButton); 
        } 
       }); 
      } 
     }; 
    } 
})(); 

Answer 1

好作品终于这样做：

新代码：

var firstPart = $filter('emoji')(String(text).substring(0, maxLength)); 
var secondPart = $filter('emoji')(String(text).substring(maxLength, text.length)); 

在

DD-坍塌text.client.directive.js

(function() { 
'use strict'; 

angular 
    .module('core') 
    .directive('ddCollapseText', collapseText); 

collapseText.$inject = ['$compile','$filter']; 

/* @ngInject */ 
function collapseText($compile,$filter) { 
    return { 
     restrict: 'A', 
     replace: true, 
     link: function(scope, element, attrs) { 

      // start collapsed 
      scope.collapsed = false; 

      // create the function to toggle the collapse 
      scope.toggle = function() { 
       scope.collapsed = !scope.collapsed; 
      }; 

      // get the value of the dd-collapse-text attribute 
      attrs.$observe('ddCollapseText', function(maxLength) { 
       // get the contents of the element 
       var text = element.text(); 

       if (text.length > maxLength) { 
        // split the text in two parts, the first always showing 
        var firstPart = $filter('emoji')(String(text).substring(0, maxLength)); 
        var secondPart = $filter('emoji')(String(text).substring(maxLength, text.length)); 

        // create some new html elements to hold the separate info 
        var firstSpan = $compile('<span>' + firstPart + '</span>')(scope); 
        var secondSpan = $compile('<span ng-if="collapsed">' + secondPart + '</span>')(scope); 
        var moreIndicatorSpan = $compile('<span ng-if="!collapsed">...</span>')(scope); 
        var toggleButton = $compile('<span class="collapse-text-toggle" ng-click="toggle()">{{collapsed ? "less" : "more"}}</span>')(scope); 

        // remove the current contents of the element 
        // and add the new ones we created 
        element.empty(); 
        element.append(firstSpan); 
        element.append(secondSpan); 
        element.append(moreIndicatorSpan); 
        element.append(toggleButton); 
       } 
      }); 

     } 
    }; 
} 
})(); 

在AngularJS控制器：

$scope.toEmoji= function(text){ 
     return $filter('emoji')(text); 
    }; 

而在AngularJS查看：

<span data-dd-collapse-text="350" data-ng-bind-html="comment.comment.length>350?comment.comment:toEmoji(comment.comment)"></span>