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

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

寻∝梦
寻∝梦원래의
2018-09-07 16:57:441110검색

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

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

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

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


<li>{{ list.name }}

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

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

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

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

刚开始我尝试在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"表示指令放在DOMclass中(驼峰形式,即class="repeat-finish"),scope.$last === true表示已经渲染到了最后一个对象,此时执行change_list函数(定义在控制器中,功能是把当前active的对象取消active,然后设置传入的DOM对象为active),element[0]可以直接取到当前渲染的DOM元素。注意我使用了$timeout10ms后执行change_list,我发现直接使用change_list还是会找不到DOMAngularJS는 ng-repeat 렌더링이 완료되었는지 여부를 수신합니까? 문제의 프로세스에 대한 세부정보는 다음과 같습니다.

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

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

🎜MyList1은 항상 active 상태(class="active")입니다.내 요구 사항은 새 목록active로 설정하는 것입니다. 목록 /code>🎜을 추가한 후, 즉 추가한 후에는 다음 스타일이 됩니다: 🎜🎜AngularJS는 ng-repeat 렌더링이 완료되었는지 여부를 수신합니까? 문제의 프로세스에 대한 세부정보는 다음과 같습니다.🎜🎜처음에는 시도해 보았습니다. 버튼에 해당하는 함수에서 새 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.