带有表情符号过滤器的 dd-collapse-text答案

【问题标题】：dd-collapse-text with emoji filter带有表情符号过滤器的 dd-collapse-text
【发布时间】：2015-03-13 17:25:34
【问题描述】：

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

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

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

Lorem Ipsum ...（更多）

但是，现在我想将它用于 cmets；并使用 emoji 过滤器过滤图标。

这是行不通的。：

<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);
                    }
                });
            }
        };
    }
})();

【问题讨论】：

你有这方面的 plnkr/fiddle 吗？
不抱歉，我试过了，但这是我第一次玩小提琴，我不知道它是如何工作的。我放了一个示例代码：jsfiddle.net/prvzkykL 但是在这个示例中无论如何都不起作用。

标签： javascript angularjs angularjs-directive mean-stack angularjs-filter

【解决方案1】：

好的，终于可以这样做了：

新代码：

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

在

dd-collapse-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>

【讨论】：