AngularJS는 ng-repeat 렌더링이 완료되었는지 여부를 수신합니까? 문제의 프로세스에 대한 세부정보는 다음과 같습니다.

이 글은 문제를 소개하기 위한 것이며, 물론 일부 문제를 해결할 수도 있습니다. ng-repeat 렌더링 완료를 모니터링하는 angularjs의 예를 소개합니다. 관심 있는 친구들은 함께 살펴보세요.

특정 프로젝트에는 내 웹페이지에 다음 스타일의 목록 <ul></ul> 요소가 있습니다. <ul></ul>元素，样式如下：

实际上它是通过Angular的ng-repeat形成的，html中的代码是：

<li>{{ list.name }}

图中下方的新建清单button，点击之后就往lists数组中push了一个新的list对象，此时页面会自动渲染，也对应增加一个<li>，如下：

注意MyList1一直是active状态的(class="active")，我的需求是新增list后，把新增的list设置为active，即在新增后就变成下面这种样式：

刚开始我尝试在button对应的函数中，往lists数组中push了新的list对象后，使用document.getElementById获取到新增的<li>对象，然后为其添加一个class="active"，结果发现获取到的DOM对象为null，经过搜索发现原因是：往lists数组push对象后，数组发生改变，所有的<li>都会重新渲染，在push完成之后马上去找新增的DOM对象，DOM还没渲染好，因此是获取不到的。解法是：使用AngularJS的指令去监听ng-repeat是否渲染完成，在渲染完成后，再去取新增的<li>对象，（想看更多就到PHP中文网AngularJS开发手册中学习）这个网上有很多相关的内容了，代码如下：

myapp.directive('repeatFinish', function ($timeout) {
    return {
        restrict: "C",
        link: function (scope, element, attr) {
            if(scope.$last === true){
                $timeout(function () {
                    scope.change_list(element[0]);
                }, 10);
            }
        }
    }
});

上述代码建立了一个名为repeatFinish的指令，restrict: "C"表示指令放在DOM的class中（驼峰形式，即class="repeat-finish"），scope.$last === true表示已经渲染到了最后一个对象，此时执行change_list函数（定义在控制器中，功能是把当前active的对象取消active，然后设置传入的DOM对象为active），element[0]可以直接取到当前渲染的DOM元素。注意我使用了$timeout，10ms后执行change_list，我发现直接使用change_list还是会找不到DOM

실제로는 Angular의 ng-repeat가 형성됩니다. html의 코드는 다음과 같습니다. rrreee새 목록 버튼 그림 하단에서 클릭하면 새 list 개체가 lists 배열에 push됩니다. 이때 페이지는 자동으로 표시됩니다. 렌더링되고 이에 따라 가 다음과 같이 추가됩니다.

🎜MyList1은 항상 active 상태(class="active")입니다.내 요구 사항은 새 목록을 active로 설정하는 것입니다. 목록 /code>🎜을 추가한 후, 즉 추가한 후에는 다음 스타일이 됩니다: 🎜🎜🎜🎜처음에는 시도해 보았습니다. 버튼에 해당하는 함수에서 새 list 개체를 lists 배열에 push한 후 를 사용하세요. document.getElementById를 사용하여 새로 추가된 <li> 객체를 얻은 다음 여기에 class="active"를 추가한 것으로 나타났습니다. DOM 개체가 null입니다. 검색 후 이유가 발견되었습니다. 개체를 목록에 푸시한 후 > 배열이 변경되면 모든 <li>가 다시 렌더링됩니다. push가 완료된 후 새로 추가된 DOM을 즉시 찾으세요. code> 객체입니다. <code>DOM이 아직 렌더링되지 않았으므로 가져올 수 없습니다. 🎜해결책: AngularJS의 지침을 사용하여 ng-repeat 렌더링이 완료되었는지 모니터링하고, 렌더링이 완료된 후 새로 추가된 <li> object 🎜, (자세한 내용을 보려면 PHP 중국어 웹사이트 🎜AngularJS 개발 매뉴얼🎜을 방문하세요.) 이 웹사이트에는 관련 내용이 많이 있습니다. : 🎜rrreee🎜위 코드는 repeatFinish 명령어라는 객체를 생성합니다. restrict: "C"는 명령어가 class에 배치된다는 의미입니다. code>DOM(카멜의 경우, 즉 class="repeat-finish"), scope.$last === true는 마지막 객체가 렌더링되었으며, 이때 change_list 함수가 실행됩니다. (컨트롤러에 정의되어 있으며, 함수는 현재 active 객체 active)를 취소하는 것입니다. > 그런 다음 들어오는 DOM 객체를 active 로 설정합니다. element[0]는 현재 렌더링된 DOM을 직접 가져올 수 있습니다. 코드> 요소. <strong><code>$timeout을 사용했고 10ms 후에 change_list를 실행했습니다. change_list를 직접 사용하면 여전히 문제가 발생합니다. DOM을 찾을 수 없습니다. 이유를 알 수 없습니다. 이 질문에 대답할 수 있는 사람이 있을까요? 🎜🎜🎜이 기사는 여기서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트 🎜AngularJS 사용자 매뉴얼🎜을 방문하세요.) 궁금한 점이 있으면 아래에 메시지를 남겨주세요. 🎜🎜🎜

위 내용은 AngularJS는 ng-repeat 렌더링이 완료되었는지 여부를 수신합니까? 문제의 프로세스에 대한 세부정보는 다음과 같습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!