1

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

3 回答 3

3

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

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

于 2013-10-19T15:20:17.133 回答
3

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

来自 Angular API ng-src：

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

于 2013-10-19T15:25:39.400 回答
1

如您所知，$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");
              });
于 2013-10-19T15:20:28.213 回答