2013-12-20 6 views
1

먼저 Angular에서 컨트롤러의 DOM 요소를 업데이트하지 말아야한다는 수백만 개의 게시물을 읽었습니다. 알아.

각도 타이머 지시문 (카운트 다운)을 사용하려고 할 때. 필자는 몇 가지 문제에 직면하여 마침내 플러그인 개발자의 도움을 받아 작업을 수행하고 요구 사항을 충족시키는이 플 런커를 만들었습니다. 내 응용 프로그램에이 코드를 이동할 때 내 컨트롤러에 $ 요소를 추가 할 때

http://plnkr.co/edit/CWXnKMbygVDMc8xzshZa?p=preview

그러나, 나는 다음 오류가 발생했습니다 : 나는 많은 게시물을 읽고

`Error: Unknown provider: $elementProvider <- $element` 

나는 그것을 할 수있는 알고 주사하지만, 왜 내 애플 리케이션에서 작동하지 않는지 모르겠다.

나는 일을 올바르게하고 싶기 때문에 나쁜 습관을 구현하고 싶지 않습니다. 따라서 더 나은 접근 방법이 있다면 알려 주시기 바랍니다.

+0

앱에 타이머 모듈을 등록하는 것을 잊지 않았습니까? ('var app = angular.module ('지연 타이머 ', ['timer '])'를 호출하고 index.html에'angular-timer.min.js '를 추가하면'$ element'가 순간. –

답변

1

jQuery를 사용하여 DOM을 구문 분석하는 것처럼 보이며, ng-repeat 내에서 타이머 지시문을 사용하지 않는 이유를 알지 못합니다.

여기서 다음 ng-repeat

$scope.elapsedTimers=[]; 

$scope.$on('timer-stopped', function (data) { 
    /* loop through bookings to find one that just stopped*/ 
    var now = new Date(); 
    angular.forEach($scope.bookingsList, function (item) { 
     if (!item.elapsed) { 
      if (item.booking_date <= now) {     
       item.elapsed = true; 
       $scope.$apply(function() { 
        $scope.elapsedTimers.push(item) 
       }); 
      } 
     } 
    }); 
}); 

HTML

<div id="result"> 
    <div ng-repeat="item in elapsedTimers">ID {{item.id}} elapsed</div> 
</div> 

DEMO

참고하여 표시 eleapsedTimers을위한 범위에 그냥 추가 접근법 여분 배열이다 .. 이 와일 l 예약 객체에 새 속성 elapsed을 추가합니다. 이것이 문제인 경우 회피 방법을 만들 수 있습니다

관련 문제