Question

我正在使用this directive来了解和隐藏大文本。但问题是如果我们在ng-repeat中有多个元素并且应用了该指令。当我点击更多链接时，所有带有该指令的元素都会被扩展。我可以只让单个div崩溃和隐藏。??

我尝试调试该指令，发现只有一个名为collapse的范围变量，当此变量切换时，变量值将应用于使用此指令的所有元素。我能解决这个问题吗？

// a directive to auto-collapse long text
angular.module('myapp')
    .directive('ddCollapseText', ['$compile', function($compile) {
        return {
            restrict: 'A',
            replace: true,
            link: function(scope, element, attrs) {
                console.log(element);
                // 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('<a href="javascript:void(0)" class="collapse-text-toggle" ng-click="toggle()"><i ng-if="!collapsed" class="fa fa-level-down"></i> <i ng-if="collapsed" class="fa fa-level-up"></i> {{collapsed ? "less" : "more"}}</a>')(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

实际上我在指令中缺少scope : true,。当我补充说它已得到修复。

因此该指令将成为：

angular.module('myapp')
    .directive('ddCollapseText', ['$compile', function($compile) {
        return {
            restrict: 'A',
            scope : true,
            replace: true,
            link: function(scope, element, attrs) {
                //console.log(element);
                // 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('<a href="javascript:void(0)" class="collapse-text-toggle" ng-click="toggle()"><i ng-if="!collapsed" class="fa fa-level-down"></i> <i ng-if="collapsed" class="fa fa-level-up"></i> {{collapsed ? "less" : "more"}}</a>')(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);
                    }
                });
            }
        };
    }]);

更新： dd-text-collapse

ddCollapse不适用于多个元素

1 个答案: