Question

当我的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);
                });
        }
    };
});

Answer 1

检查ng-cloak指令。这完全是为了这个目的。

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

Answer 2

您必须在ng-src标记中使用src指令而不是普通img属性。

来自ng-src的Angular API：

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

Answer 3

如您所知$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");
              });

Angular ng-repeat在填充迭代器之前呈现模板

3 个答案: