在填充迭代器之前，角度 ng 重复渲染模板

Angular ng-repeat renders template before iterator is populated

本文关键字：ng 角度迭代器填充更新时间：2023-09-26

当我的ng页面加载包含下面的ng-repeat标记时，它会在填充迭代器之前呈现IMG标签，但由于不存在src值，因此为部分src生成404。

<div ng-repeat="item in preview_data.items">
        <h4>{{item.title}}</h4>
        <a href="http://www.youtube.com/watch?v={{item.id}}" target="_blank"><img src="{{item.thumb}}" /></a>
    </div>

然后我的控制器启动并用正确的视频列表填充它。

在控制器准备好数据之前，如何阻止 HTML 呈现？

该页面由以下路由调用：

app.config(function ($routeProvider, $locationProvider ) {
    $locationProvider.html5Mode(true);
    console.log('config');
    $routeProvider.when("/", {
        templateUrl: "/templates/createFeed.html",
        controller: "CreateFeedController"
    });
});

它调用工厂以获取要从后端 API 预览的视频列表：

app.controller("CreateFeedController", function ($scope, $route, $sce, Preview) {
    var keywords = decodeURIComponent($route.current.params.keywords);
    $scope.preview_data = {
        keywords: keywords
    }
    //pass parameters to web preview API
    Preview.get(keywords, function (data) {
        $scope.preview_data.items = data;
    });

});
app.factory('Preview', function ($http) {
    return{
        get: function (keywords, next) {
            $http({method: 'GET', url: '/api/preview/', json:true,
                    params: {keywords: keywords}}
            ).success(function (data) {
                    // prepare data here
                    //console.log(data);
                    next(data);
                });
        }
    };
});

您必须

在 img 标记中使用 ng-src 指令而不是纯src属性。

从 Angular API for ng-src ：

浏览器将使用文字文本 {{hash}} 从 URL 中获取，直到 Angular 替换 {{hash}} 中的表达式。ngSrc指令解决了这个问题。

检查 ng-cloak 指令。它正是为此而设计的。

http://docs.angularjs.org/api/ng.directive:ngCloak

如您所知$http回报承诺。因此，您的工厂是异步的。

所以工厂应该是这样的：

app.factory('Preview', function ($http, $q) { 
    return{
        get: function (keywords, next) { 
            var deferred = $q.defer();
            $http({method: 'GET', url: '/api/preview/', json:true,
                    params: {keywords: keywords}}
            ).success(function (data) {
                      deferred.resolve(data);
                }).error(function() {
                deferred.reject("Error ...");
            });
            //Returning the promise object
            return deferred.promise;
        }
    };
});

和控制器：

        Preview.get(keywords)   // returns promise
           .then(function (result) {
              $scope.preview_data.items = result;                           
             }, function (result) {
               alert("Error: No data returned");
              });