等待数据加载

Question

我正在尝试在我的angular应用程序上添加一个自定义的推文按钮。下面是我用来做这件事的代码：

HTML：

<a href="" class="retweet" retweet target="_blank" data-info="{{ data.name }}">
    Tweet
</a>

JS：

myApp.directive('retweet', function(){
    return function(scope, elm, attrs){
        var API_URL = "http://cdn.api.twitter.com/1/urls/count.json",
            TWEET_URL = "https://twitter.com/intent/tweet";

        elm.each(function() {
            var elem = $(this),
                // Use current page URL as default link
                url = encodeURIComponent(elem.attr("data-url") || document.location.href),
                // Use page title as default tweet message
                text = elem.attr("data-info") || document.title,
                via = elem.attr("data-via") || "",
                related = encodeURIComponent(elem.attr("data-related")) || "",
                hashtags = encodeURIComponent(elem.attr("data-hashtags")) || "";

            console.log(elem.attr("data-job"));
            // Set href to tweet page
            elem.attr({
                href: TWEET_URL + "?hashtags=" + hashtags + "&original_referer=" +
                        encodeURIComponent(document.location.href) + "&related=" + related +
                        "&source=tweetbutton&text=" + text + "&url=" + url + "&via=" + via,
                target: "_blank",
                onclick: "return !window.open(this.href, 'Google', 'width=500,height=500')"
            });
        });
    }
})

我这里的问题是js甚至在数据加载到页面之前就获取数据了。因此，"text“变量被设置为{{ data.test }}，而不是稍后加载到页面上的实际数据。如何确保数据按时加载？

非常感谢

Answer 1

您可以使用ng-cloak来防止呈现未编译的数据：

<a href="" class="retweet" retweet target="_blank" data-info="{{ data.name }}" ng-cloak>
    Tweet
</a>

你可以在这里阅读更多信息：http://docs.angularjs.org/api/ng/directive/ngCloak

Answer 2

您可以尝试直接使用$scope.data.name而不是elem.attr("data-info")吗

或者，您可以将表达式添加为属性：

<a href ... data-info="$scope.data.name">

并像这样使用它：

scope.$eval(attrs.dataInfo);