Question

我有一个简单的span元素和一些文本。我想在我的html中粘贴标签＆＃34; span＆＃34;使用任何文本和指令＆＃34; text-type＆＃34;。每100毫秒会出现一个新符号。所以，首先，我必须将span文本保存在某个变量中，然后使用我的指令显示文本：

<span data-text-type>Just a text</span>

我想在我的指令

中更改文字

app.directive('textType', function() {
return {
    restrict: 'A',
    template: '{{newText}}',
    scope:{},
    link: function(scope, element) {
        var text = element.text().split(''); /*will be '{{newText}}', but not 'Just a text'*/

        scope.newText = '';

        (function fn () {
                if (text.length) {
                    scope.textStr += text.shift();
                    $timeout(fn, 100);
                }
            }());

    }
}

}）;

那么，如何在指令改变之前保存文本呢？

Answer 1

我发现需要使用返回链接函数的编译函数，并将“scope：{}”更改为“scope：true”以使用每个元素的隔离范围。

return {
    restrict: 'A',
    scope:true,
    compile: function(element, attrs) {
        var string = element.text().split(''),
            max = string.length;



        element[0].innerHTML ='<span class="tt-text">{{textStr}}</span><span class="tt-heading">{{textHeading}}</span>';

        return function(scope, element, attrs, controller) {
            var dur = 200;

            scope.textStr = '';
            scope.textHeading = string[0];

            (function fn() {
                if (string.length) {
                    head.stop().fadeOut(0).fadeIn(dur, function() {
                        scope.textStr += string.shift();
                        scope.textHeading = string[0];
                        scope.$apply();
                        fn();
                    });
                } else {
                    scope.textHeading = '';
                }
            }());
        }
    }
}

如何在angular指令更改内容之前获取文本元素

1 个答案: