1

以下の ng-repeat マークアップを含む ng ページを読み込むと、イテレータが入力される前に 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の代わりにディレクティブを使用する必要があります。srcimg

の Angular API からng-src:

ブラウザーは、Angular が {{hash}} 内の式を置き換えるまで、URL からリテラル テキスト {{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 に答える