각도가 동적으로 지연된 HTML을 업데이트하지 않습니다.

Question

각도를 사용하여 동적 사이트를 작성하려고합니다. 나는 $q.defer으로 setTimeout을 사용하여 HTML 로딩 지연을 시뮬레이션하려고합니다. 시간 초과가 없으면 작동하지만 타임 아웃을 추가하자마자 데이터가로드되지 않습니다. 다른 뷰 사이를 클릭하면 은이 채워 지므로 실행 중임을 알 수 있습니다. 하지만 Angular는 마침내 사용할 수 있음을 알지 못합니다.

내가 함께 HTML 파일을 가지고 다음

이

<div ng-include="'teasers.html'"></div> 

여기 teasers.html입니다 :

이

<div ng-controller="MyCtrl"> 
    <div id='my-content' ng-view></div> 

    <div id='footer'> 
    footer here 
    <a href="#!/">View 1</a> <a href="#!/view2">View 2</a> 
    </div> 
</div> 

여기 view1.html의 다음

<div class='column content' ng-repeat="teaser in data.teasers"> 
    <div class='button type-overlay' ng-class="{{ 'button-' + ($index + 1) }}"> 
    <div class='teaser-text'> 
     <img class='button-background' ng-src='{{ teaser.img_src }}'> 
     <span class='teaser-text'>{{ teaser.name }}</span> 
    </div> 
    </div> 
</div> 

의 내 app.js :

var app = angular.module('app', [], function($routeProvider, $locationProvider) { 
    $locationProvider.hashPrefix("!"); 

    $routeProvider.when('/', { 
    templateUrl: 'view1.html' 
    }); 
    $routeProvider.when('/view2', { 
    templateUrl: 'view2.html' 
    }); 
}); 

app.factory('data', function($http, $q) { 
    return { 
    fetchTeasers: function() { 
     var deferred = $q.defer(); 

     setTimeout(function() { 
     deferred.resolve([ 
      { 
      "name": "Teaser 1", 
      "img_src": "SRC" 
      }, 
      { 
      "name": "Teaser 2", 
      "img_src": "SRC" 
      }, 
      { 
      "name": "Teaser 3", 
      "img_src": "SRC" 
      }, 
      { 
      "name": "Teaser 4", 
      "img_src": "SRC" 
      } 
     ]); 
     }, 5000); 

     return deferred.promise; 
    } 
    } 
}); 

그리고 여기에는 년대 controller.js :

function MyCtrl($scope, data) { 
    $scope.data = {}; 
    $scope.data.teasers = data.fetchTeasers(); 
} 

내가 각도에서 작업 deferred을 얻으려면 어떻게해야합니까?

Answer 1

대신 window.setTimeout 각도 시간 초과 방법을 사용하십시오 : $ timeout. DI를 통해로드하십시오.

$timeout(function(){ 
    // all your magic goes here 
}); 

는 그건 그렇고, 당신의 setTimeout을 사용할 수 있지만 당신은 수동으로 $scope.$apply()를 호출 할 필요가있다. 사실 이것은 각도가 내부적으로하는 것입니다.

$scope.$apply(function(){ // all your magic goes here }) 

하지만 다시 말하면, $ timeout을 사용하십시오.

추신. 이유는 사용자 상호 작용 후에보기가 더티 검사를 호출한다는 사실입니다. 불행히도이 경우에는 너무 늦습니다. $ apply 또는 $ timeout을 사용하면 필요시 변경에 대해 각도에 알립니다.

PPS. 이 특정 문제에 대한 답변을 게시했지만이 경우에는 $resource을 사용할 수 있음을 언급해야합니다. 이는 축약 된 RESTful API를 지원하는 각도 서비스입니다. $ q를 기반으로하는 지연의 구현도 사용합니다. 네가 그럴만한 이유가 없다면 바퀴를 재발 명할 필요가 없다.