ng-repeat로 함수가 반환 한 항목을 반복하는 방법은 무엇입니까?
div를 반복적으로 만들고 싶습니다. 항목은 함수에 의해 반환되는 객체입니다. 그러나 다음 코드는 오류를보고합니다. 10 $ digest () 반복에 도달했습니다. 중단 중! jsfiddle은 여기에 있습니다 : http://jsfiddle.net/BraveOstrich/awnqm/
<body ng-app>
<div ng-repeat="entity in getEntities()">
Hello {{entity.id}}!
</div>
</body>
짧은 대답 : 당신은 정말로 그러한 기능이 필요합니까, 아니면 속성을 사용할 수 있습니까? http://jsfiddle.net/awnqm/1/
긴 대답
간단히하기 위해 여러분의 경우에 대해서만 설명하겠습니다 – ngRepeat for array of objects. 또한 세부 사항을 생략하겠습니다.
AngularJS는 변경을 감지하기 위해 더티 검사 를 사용합니다 . 응용 프로그램이 시작되면에 $digest대해 실행 됩니다 $rootScope. 범위의 계층 구조에$digest 대해 깊이 우선 순회를 수행 합니다 . 모든 스코프에는 시계 목록이 있습니다. 각 시계에는 마지막 값이 있습니다 (처음에는 initWatchVal). 모든 시계의 각 범위에 대해 시계를 $digest실행하고 현재 값 ( watch.get(scope))을 가져 와서 비교합니다 watch.last. 현재 값이 같지 않은 경우 watch.last(항상 첫 번째 비교를 위해) $digest가로 설정 dirty됩니다 true. 모든 범위가 처리되는 경우 dirty == true $digest에서 다른 깊이 우선 순회가 시작됩니다 $rootScope. $digestdirty == false 또는 순회 횟수 == 10 일 때 종료됩니다. 후자의 경우 "10 $ digest () 반복에 도달했습니다."오류가 발생합니다. 기록됩니다.
이제 약 ngRepeat. 각 watch.get호출에 대해 getEntities추가 정보와 함께 콜렉션 (반환 값)의 오브젝트를 캐시 ( HashQueueMapby hashKey)에 저장합니다. 모든 watch.get호출 ngRepeat에 대해 hashKey캐시에서 객체를 가져 오려고 시도 합니다. 이 캐시에 존재하지 않는 경우 ngRepeat캐시에 저장,,, 풋는 개체, 새로운 범위를 생성 DOM 요소를 생성 등 .
이제 약 hashKey. 일반적으로 hashKey에 의해 생성 된 고유 번호 nextUid()입니다. 그러나 그것은 기능 이 될 수 있습니다 . hashKey나중에 사용하기 위해 생성 한 후 객체에 저장됩니다.
예제에서 오류가 발생하는 이유 : 함수는 getEntities()항상 새 객체로 배열을 반환합니다. 이 객체는 캐시에 hashKey없거나 존재하지 않습니다 ngRepeat. 따라서 ngRepeat각각에 대해 watch.get새 시계를 사용하여 새로운 범위를 생성합니다 {{entity.id}}. 이 시계는 처음에 watch.get있습니다 watch.last == initWatchVal. 그래서 watch.get() != watch.last. 그래서 $digest새로운 횡단을 시작합니다. 그래서 ngRepeat새로운 시계 새 범위를 만듭니다. 따라서 ... 10 회 통과 후 오류가 발생합니다.
어떻게 고칠 수 있습니까?
- 모든
getEntities()통화 에서 새 객체를 만들지 마십시오 . - 새 객체를 만들어야하는 경우 해당 객체에
hashKey대한 방법을 추가 할 수 있습니다 . 예제는 이 주제 를 참조하십시오 .
AngularJS 내부를 알고있는 사람들이 내가 잘못하면 나를 바로 잡기를 바랍니다.
반복 외부에서 배열을 초기화
<body ng-app>
<div ng-init="entities = getEntities()">
<div ng-repeat="entity in entities">
Hello {{entity.id}}!
</div>
</div>
</body>
여기에 보고되었으며 다음 과 같은 응답이 있습니다.
getter는 dem 등성이 아니며 모델이 호출 될 때마다 새 배열을 생성하여 모델을 변경합니다. 이것은 모델이 결국 안정화되기를 희망하면서 각도를 계속 호출하도록 강요하지만 결코 각도를 포기하지 않고 예외를 던집니다.
게터가 반환하는 값은 동일하지만 동일하지 않으므로 문제가됩니다.
어레이를 메인 컨트롤러 밖으로 옮기면이 동작이 사라지는 것을 볼 수 있습니다.
var array = [{id:'angularjs'}];
function Main($scope) {
$scope.getEntities = function(){return array;};
};
왜냐하면 매번 같은 객체를 반환하기 때문입니다. 함수 대신 범위의 속성을 사용하려면 모델을 다시 설계해야 할 수 있습니다.
컨트롤러의 메소드 결과를 속성에 할당하고 이에 대해 ng : repeat를 수행하여 문제를 해결했습니다.
@przno 의견을 바탕으로
<body ng-app>
<div ng-repeat="item in t = angular.equals(t, getEntities()) ? t : getEntities()">
Hello {{item.id}}!
</div>
</body>
BTW second solution @Artem Andreev suggests is not working in Angular 1.1.4 and greater, while first one does not solve the problem. So, I'm afraid for now this is the less spiky solution without disadvantages in functionality
'development' 카테고리의 다른 글
| JSON 객체가 아닌 JSON 배열로 json_encode 스파 스 PHP 배열 (0) | 2020.07.27 |
|---|---|
| Sqlite : CURRENT_TIMESTAMP는 시스템 시간대가 아닌 GMT입니다. (0) | 2020.07.27 |
| PostgreSQL-데이터베이스 이름 변경 (0) | 2020.07.27 |
| ng-click 이벤트를 조건부로 만드는 방법은 무엇입니까? (0) | 2020.07.27 |
| 페이지를 새로 고친 후 JS 변수가 값을 유지하는 방법은 무엇입니까? (0) | 2020.07.27 |