backgroung-image url在控制器完成请求之前执行？

Question

我现在正在学习Angular JS。

现在我需要在页面中显示一篇文章，文章数据来自controller.js中的后端。

但我发现将有2个请求获取文章背景图片。一个是错的，另一个是对的。

看来background-image：url在控制器设置{{}}的值之前执行。

有人可以给我一些建议以避免错误的请求吗？

以下是代码。

<header class="intro-header" style="background-image: url('{{ article_data.article_title_pic }}')">
<div class="container">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
            <div class="post-heading">
                <h1>{{ article_data.article_title }}</h1>
                <!--<h2 class="subheading">Problems look mighty small from 150 miles up</h2>-->
                <span class="meta">Posted by <a href="#">{{ article_data.article_author }}</a> on {{ article_data.article_time | formatDate}}</span>
            </div>
        </div>
    </div>
</div>

controller.js

    // controller
myControllers.controller('articleContrl', ['$scope', 'RestServer', '$routeParams', function ($scope, RestServer, $routeParams) {
    // data
    $scope.article_data = {};

    // article id
    $scope.article_id = $routeParams.id;
    //console.log("$scope.article_id: " + $scope.article_id);

    // get article data from server
    var get_article = function (article_id) {
        RestServer.post(
            "/get_article",
            {
                "article_id": article_id
            },
            function (response) {
                if (response.result === "success") {
                    // success
                    $scope.article_data = response.data;
                }
                else {
                    console.log("get_article fail, error: " + response.error);
                    $scope.errorMessage = response.error;
                }
            },
            function (err) {
                // failed
                console.log("get_article fail, error: " + err);
                $scope.errorMessage = err;
            }
        );
    };

    // main
    get_article($scope.article_id);
}]);

感谢。

Answer 1

使用Angular JS指令来解决这个问题。像ng-style =“{'background-image'：'url（'+ selectedMeal.url +'）'}”。