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

Question

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

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

结果示例（不是 350 个字符）：

Lorem Ipsum ... (more)

但是，现在我想用它来评论；并使用图标的 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);
                    }
                });
            }
        };
    }
})();

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

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

dd-collapse-text with emoji filter

javascript

angularjs

angularjs-directive

mean-stack

angularjs-filter