javascript - 在 AngularJS 指令中编译模板之前评估嵌入的文本

Question

我正在 AngularJS 中处理“collapseText”指令。它的功能是最多显示“maxLength”字符和一个“阅读更多”选项，如果文本太大，该选项将加载其余文本。

我希望我的指令能够嵌入文本，包括表达式。

理想情况下，我希望它看起来像这样:

<collapse-text max-length="10">This text will be collapsed</collapse-text>
<collapse-text max-length="10">{{foo}}</collapse-text>

我使用的模板是:

<span>{{lessText}}</span>
<span ng-if="overflow">
    <span ng-if="!readMore" style="cursor:pointer" ng-click="toggleReadMore()">...(read more)</span>
    <span ng-if="readMore">{{moreText}}</span>
</span>

我的指令是这样的:

'use strict'
angular.module('myModule')

.directive('collapseText', function($window){
    return{
        restrict: 'E',
        scope: true,
        transclude: true,
        controller : function($scope){
            $scope.toggleReadMore = function(){
                $scope.readMore = true;
            }
        },
        link: function(scope, element, attrs, ctrl, transclude){
            scope.maxLength = attrs.maxLength;
/* 1. Evaluate transcluded element */
/* 2. Check transcluded element's length */
/* 3. Set lessText, moreText, readMore and overflow */
/* 4. Evaluate this directive's template */
            console.log(transclude(scope.$parent, function(compiled){
                scope.lessText = compiled.text().substring(0, scope.maxLength);
                scope.moreText = compiled.text().substring(0, scope.maxLength);
                scope.readMore = false;
                scope.overflow = scope.moreText ? true : false;
                return compiled.text();
            }).text());
        },
        templateUrl: "templates/collapse-text-template.html"
    }
});

完成步骤 1-4 的正确方法是什么？我看到的两个症状是:

1. 已解决:在更新 overflow 和 readMore 变量后，不会重新评估 ng-if 语句，因此，这些文本字段永远不会出现在 DOM 中。
   • 我通过将 ng-if 语句分别更改为“overflow === true”、“readMore === false”和“readMore === true”来修复 ng-if 语句未被重新评估的问题。对于为什么它不能简单地与 .关于嵌入文本评估的主要问题仍然存在。
2. PENDING:{{foo}} 被打印为“{{foo}}”而不是“foo 包含的文本”。

预先感谢您的帮助!

Answer 1

在指令的 link() 函数中，您必须等到 {{foo}} 被评估并可以使用。这可以通过使用 $timeout() 在浏览器的事件循环中安排一个新任务来完成。我不确定这是否是最干净的解决方案，但至少它有效。

这是带有 $timeout() 和一些小改进的代码:

<div ng-app="myModule" ng-controller="MyController">
    <collapse-text max-length="10">This text will be collapsed</collapse-text>
    <collapse-text max-length="10">{{foo}}</collapse-text>
</div>

template.html

<span ng-if="!readMore">{{lessText}}</span>
<span ng-if="overflow">
    <span ng-if="!readMore && overflow" style="cursor: pointer;" ng-click="toggleReadMore()">...(read more)</span>
    <span ng-if="readMore">{{moreText}}</span>
</span>

脚本

angular.module('myModule', []).controller('MyController', function($scope){
    $scope.foo = 'This text will also be collapsed';
});

angular.module('myModule').directive('collapseText', function($timeout){
    return {
        restrict: 'E',
        scope: true,
        transclude: true,
        controller: function($scope){
            $scope.toggleReadMore = function(){
                $scope.readMore = true;
            };
        },
        link: function(scope, element, attrs, ctrl, transclude){
            var maxLength = +attrs.maxLength;
            var compiled = transclude(scope.$parent);

            $timeout(function(){
                scope.lessText = compiled.text().substring(0, maxLength);
                scope.moreText = compiled.text();
                scope.readMore = false;
                scope.overflow = scope.moreText.length > maxLength;
            });
        },
        templateUrl: "template.html"
    }
});

请注意，此实现不会对 $scope.foo 的更新使用react(即指令不会看到更新和重新呈现)。如果你需要这个，我建议你将内容传递给属性中的指令并实现一个观察者而不是使用嵌入。例如:

angular.module('myModule').directive('collapseText', function(){
    return {
        restrict: 'E',
        scope: {
            myContent: '=',
            // ...
        },
        link: function(scope){
            scope.$watch('myContent', function(newValue){
                if (newValue !== undefined) {
                    doSomethingWith(newValue);
                }
            });
        },
        templateUrl: "template.html"
    }
});