Question

我正在尝试在我的角度应用上添加自定义推文按钮。这是我用来做的代码：

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);

等待数据加载

2 个答案: