Angular指令未按时获得评估属性

Question

我创建了一个简单的Angular指令，它根据您可以作为属性传递的字符串为元素的背景着色。代码如下：

(function() {
    'use strict';

    angular
        .module('proverbial')
        .directive('randomBackgroundColor', Directive);

    Directive.$inject = [ '$timeout' ];

    function Directive($timeout) {
        var directive = {
            link: link,
            restrict: 'A'
        };
        return directive;

        function link(scope, element, attrs) {
            let hash;
            hash = attrs.text.hashCode();
            //generate color based on the containers' string
            let r = (16711680 & hash) >> 16;
            let g = (65280 & hash) >> 8;
            let b = 255 & hash;
            r = parseInt((r + 255) / 4);
            g = parseInt((g + 255) / 4);
            b = parseInt((b + 255) / 4);
            let color = "rgb(" + r + "," + g + "," + b + ")";

            //Add random background class to selected element
            element.css('background-color', color);
        }
    }
})();

有趣的是，当我在ng-repeat中使用它时，它按预期工作：

<div class="text-center clearfix">
    <span class="card" random-background-color text="{{proverb.text}}" ng-repeat="proverb in $ctrl.proverbs">
        <a ui-sref="unrestricted.proverb">{{proverb.text}}</a>
    </span>
</div>

在这里你可以看到结果：

然而，当我单独使用该指令时（在ng-repeat之外），属性文本不会按时得到评估，导致指令始终使用相同的颜色着色其元素，无论我通过哪个字符串它

当指令运行时，发生的是字符串attrs.text为空。

有没有办法解决这个而不使用$timeout