이 글은 문제를 소개하기 위한 것이며, 물론 일부 문제를 해결할 수도 있습니다. ng-repeat 렌더링 완료를 모니터링하는 angularjs의 예를 소개합니다. 관심 있는 친구들은 함께 살펴보세요.
특정 프로젝트에는 내 웹페이지에 다음 스타일의 목록 <ul></ul>
요소가 있습니다. <ul></ul>
元素,样式如下:
实际上它是通过Angular
的ng-repeat
形成的,html
中的代码是:
图中下方的新建清单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 중국어 웹사이트의 기타 관련 기사를 참조하세요!