반복자가 채워지기 전에 각도 ng-repeat가 템플릿을 렌더링합니다.

Question

아래 ng-repeat 마크 업을 포함하는 페이지가로드되면 iterator가 채워지기 전에 IMG 태그를 렌더링하지만 src 값이 없으므로 404를 생성합니다. 부분적인 src.

<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.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-src의 각도 API에서

:

브라우저는 리터럴 텍스트로 URL에서 가져옵니다 {{해시}} 각도 내부 표현을 대체 할 때까지 {{해시}}. ngSrc 지시어는이 문제를 해결합니다.

Answer 2

는 NG-망토 지침을 확인합니다 백엔드 API에서 미리 동영상의 목록을 얻을 수있는 공장을 호출

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

합니다. 이것은 정확히 이것을위한 것입니다.

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

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; 
     } 
    }; 
}); 

그리고 컨트롤러 :

그래서 공장은 같이해야 당신은 당신의 img 태그에 일반 src 속성 대신 ng-src 지시어를 사용해야합니다

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