> 웹 프론트엔드 > JS 튜토리얼 > ng-repeat가 테이블 채우기를 마친 후 jQuery 함수를 트리거하는 방법은 무엇입니까?

ng-repeat가 테이블 채우기를 마친 후 jQuery 함수를 트리거하는 방법은 무엇입니까?

Linda Hamilton
풀어 주다: 2024-11-30 08:39:11
원래의
1001명이 탐색했습니다.

How to Trigger jQuery Functions After ng-repeat Finishes Populating a Table?

ng-repeat 채우기 후 이벤트 트리거

ng-repeat를 사용하여 채워진 테이블이 포함된 div에서 jQuery 함수를 실행하려고 합니다. 하지만 $(document).ready()도 아니고 $scope.$on('$viewContentLoaded', myFunc)가 이를 트리거합니다.

사용자 지정 지시어 접근 방식

지시어는 사용자 지정 기능을 생성하는 방법을 제공합니다. ng-repeat 루프 종료에 대한 기본 제공 이벤트가 없으므로 지시문을 사용하여 이를 수행할 수 있습니다.

고려해야 할 두 가지 시나리오가 있습니다.

  1. 테이블 전체 조작: 전체 테이블에 스타일을 지정하거나 이벤트를 추가해야 하는 경우 모든 테이블을 포함하는 지시어를 사용할 수 있습니다. ng-repeat 요소.
  2. 요소별 조작: 개별 요소를 대상으로 해야 하는 경우 ng-repeat 내의 지시문을 사용하여 생성 후 각 요소에 작용할 수 있습니다.

트리거링 속성 이벤트

또한 ng-repeat와 함께 다음 속성을 활용할 수 있습니다.

  • $index: 현재 요소의 인덱스.
  • $first : 요소가 목록의 첫 번째인지 여부를 나타내는 부울
  • $middle: 요소가 첫 번째인지 나타내는 부울 가 목록 중간에 있습니다.
  • $last: 해당 요소가 목록의 마지막인지 여부를 나타내는 부울입니다.

다음 HTML을 고려하세요.

<div ng-controller="Ctrl" my-main-directive>
  <div ng-repeat="thing in things" my-repeat-directive>
    thing {{thing}}
  </div>
</div>
로그인 후 복사

명령어를 정의하여 요소:

angular.module('myApp', [])
.directive('myRepeatDirective', function() {
  return function(scope, element, attrs) {
    angular.element(element).css('color','blue');
    if (scope.$last){
      window.alert("im the last!");
    }
  };
})
.directive('myMainDirective', function() {
  return function(scope, element, attrs) {
    angular.element(element).css('border','5px solid red');
  };
});
로그인 후 복사

이 예에서 myRepeatDirective는 각 요소의 색상을 파란색으로 설정하고 "im the last!"라는 경고를 표시합니다. 마지막 요소에 대해. myMainDirective는 전체 테이블 주위에 테두리를 설정합니다.

위 내용은 ng-repeat가 테이블 채우기를 마친 후 jQuery 함수를 트리거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿