2013-10-30 6 views
9

각 타일을 다른 색상으로 만들고 싶다면 각도를 사용하여 메트로 타일 유형 격자를 만들려고합니다. 그래서 제 계획은 무작위로 루프 안의 색상을 선택하는 함수를 만드는 것입니다 (ng-repeat 사용). 다음은 여기에 JS 비트

$scope.TileColours = [{colour:'thumbnail tile tile-blue'},{colour:'thumbnail tile tile-green'},{colour:'thumbnail tile tile-red'}]; 

$scope.RandomColourClass = function(){ 
    var randomColour = $scope.TileColours[Math.floor(Math.random() * $scope.TileColours.length)]; 
    return randomColour.colour.toString(); 
}; 

이 모든 일을하고, 내가 RandomColourClass라는 함수와 클래스 이름을 설정하고 볼 수

<div class={{RandomColourClass()}} ng-repeat="stockRecord in GridStockRecords | filter:searchText"> 
    <div > 
    <h6>{{stockRecord.ProductGroupName}}</h6> 
    </div> 
</div> 

그래서 .... 내가 지금까지 무엇을 가지고 벌금과 타일 다른 색상의하지만 난 내가 했어

Error: 10 $digest() iterations reached. Aborting!".

다음과 같은 오류를 문제 주변의 다른 게시물을 살펴 점점 계속하지만 난이 작업 얻기 위해 변경할 필요가 무엇인지 알아낼 수 없습니다 !? 어떤 도움이나 방향 주시면 감사하겠습니다 :)

+0

게시물'GridStockRecords' please –

답변

25

각도는 이 때 DOM 데이터 변경 내용을 업데이트 할 기능을 소화 수행한다.

다이제스트 중에 DOM에 바인딩 한 모든 값을 다시 계산합니다 (이 경우 {{RandomColorClass()}}). 이들 중 하나가 변경되면 다시 다이제스트주기를 수행합니다 (일부 변수는 변경된 변수의 값에 따라 달라질 수 있음).

두 개의 다이제스트 결과가 같은 값이 될 때까지 반복적으로 수행합니다. 즉, 아무 것도 변경되지 않았습니다.

다이제스트가 발생하면 RandomColorClass() 함수가 호출되어 다른 값을 반환합니다. 이로 인해 추가적인 다이제스트가 발생합니다. RandomColorClass()은 다시 다른 값을 반환하여 다른 다이제스트를 트리거합니다.

이것이 어디로 가는지 볼 수 있습니까? 이 방법으로 임의의 값을 생성해서는 안되며 대신 범위에서 생성하고 유지하십시오.

function randomColourClass() { /* ... */ }; 

$scope.GridStockRecords.forEach(function(record) { 
    record.colorClass = randomColourClass(); 
}); 

및 HTML : :

한 가지 방법은 당신의 범위에있을이 특정 질문에 관련이없는

<div ng-repeat="stockRecord in GridStockRecords | filter:searchText" 
     ng-class="stockRecord.colorClass"> 
     <div> 
     <h6>{{stockRecord.ProductGroupName}}</h6> 
     </div> 
    </div> 
+0

총체적인 감각을 만듭니다! 도와 주셔서 감사합니다! – user2859298

+0

정확하게 나에게 일어난 일. 고마워요! – zeroliu

1

대답하지만 구글 전면에 있기 때문에 여기에 추가 해요 페이지에서 오류 메시지를 검색하면 알아 냈을 때까지 다소 시간이 걸렸습니다.

나는 내 생각에 다음과 같은 것을 보았습니다.

<custom-tag data="[1,2,3]"/> 

그리고 사용자 정의 태그의 컨트롤러는 $scope.data에 감시자를 설정했습니다. 이로 인해 AngularJS는 바코드가 발생했습니다. data의 값을 다시 검사 할 때마다 뷰에서 새로운 객체 (객체가 객체라는 것을 기억하십시오)가 제대로 소화되기 때문에 AngularJS가 barf가됩니다.

5

IE10에서 같은 문제가 발생했습니다. 문제는 window.location을 사용하여 리디렉션하고 있다는 것입니다.

window.location = "#route/yada"; 

$location.path("/route/yada); 

에 코드를 변경 그게 내 문제를 해결했다. = D

+0

리디렉션하는 이러한 방법으로 이상한 점이 있습니다 : $ window.location.href는'$ digest() iterations reached '를 올릴 수 있습니다. Aborting error', $ location.path()가 작동하지 않는 경우가 있습니다. $ location.url ("route/yada")로 해결했습니다. –

0

ng-class = "submit()"대신 ng-class = "submit()"을 잘못 입력했을 때이 오류가 발생했습니다. 나는 그런 어리석은 오류를 만드는 사람을 상상할 수는 없지만, 기록을 위해, 이것은 10 $ digest() 반복을 만드는 또 다른 방법이다.

관련 문제