Question

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

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

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

Lorem Ipsum ...（更多）

但是，现在我想用它来评论;并使用表情符号过滤器对图标进行过滤。

这不起作用。：

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

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

1 个答案: