AngularJS: 렌더링 후 콜백(렌더 후 DOM으로 작업)

AngularJS: 렌더링 후 콜백(렌더 후 DOM으로 작업)

메서드를 실행하는 방법$scope.myWork()렌더링 템플릿 후?를 설정하고 싶다.$scope.value그 후 JQuery로 변경해야 합니다(템플릿 콘텐츠의 DOM 등). $scope.$watch('value', function (){....})는 "전" 렌더링을 수행하고 있습니다(템플릿의 DOM은 아직 사용할 수 없습니다).감사해요.

링크 함수에서 코드를 실행하는 디렉티브를 만듭니다.템플릿이 작성된 후 링크 함수가 호출됩니다.

아이디어를 얻으려면 ng-click을 참조하십시오.

사용하고 있다terminal그리고.transclude모델이 업데이트되고 뷰가 렌더링된 후 범위 지정 메서드를 호출하는 속성 지시어(예: $Resource 후 iframe 크기를 조정하기 위해).쿼리):

.directive('postRender', [ '$timeout', function($timeout) {
var def = {
    restrict : 'A', 
    terminal : true,
    transclude : true,
    link : function(scope, element, attrs) {
        $timeout(scope.resize, 0);  //Calling a scoped method
    }
};
return def;
}])

$timeout은 블랙 매직입니다.JS 메서드를 속성값으로 선언하고 $parse할 수 있습니다.

그래서 저는 이걸ng-repeat(내 경우 트리는 재귀적으로 렌더링됩니다).

<div post-render ng-repeat="r in regions | orderBy:'name'" ng-include="'tree_region_renderer.html'">

저도 이런 문제가 있었습니다.다른 해결방법은 잘 되지 않았습니다.프로트랙터가 해결했을 것 같은 문제였습니다.Protractor의 클라이언트 측 스크립트를 간단히 확인하면 다음과 같은 기능을 사용할 수 있습니다.angular.getTestability(element)실제로 언제 테스트를 실행할지 알 수 있습니다.이 메서드는 보류 중인 타임아웃 또는 http 요구가 없을 때까지 기다렸다가 콜백을 실행합니다.제 지시는 다음과 같습니다.

export function afterRender ($timeout) {
"ngInject";
  return {
      restrict: 'A',
      terminal: true,
      link: function (scope, element, attrs) {
        angular.getTestability(element).whenStable(function() {
          console.log('[rendered]');
        });
      }
  };
}

위의 Jens 답변은 동작하지만 새로운 Angular에서는 동작합니다.JS 버전(예를 들어 1.2.3)은 둘 다 transclude: true가 있기 때문에 이 postRender 디렉티브를 같은 태그의 아트리뷰트로 ng-repeat과 조합할 수 없습니다.이 경우 트랜슬레이드를 삭제하거나 postRender 디렉티브Atribut을 가진 별도의 태그를 지정해야 합니다.
또한 단말기를 사용할 때는 속성의 priority에 주의해 주십시오.true는 같은 태그에 높은 priority가 설정되어 있기 때문에 Atribut이 비활성화될 수 있습니다.

DOM 렌더링을 프로파일링하는 방법을 찾다가 이 페이지를 찾았습니다.내 사용 사례에 맞는 매우 간단한 솔루션을 찾았습니다.

ng-init 핸들러를 DOM 요소에 연결하고 핸들러 함수에서 $timeout을 사용하여 실행을 수행합니다.예:

HTML:

<div ng-init="foo()">

JS:

$scope.foo = function() {
    $timeout(function() {
        // This code runs after the DOM renders
    });
});

언급URL : https://stackoverflow.com/questions/11953348/angularjs-callback-after-render-work-with-dom-after-render