Angular JS는 DOM의 변화를 감시

Angular JS는 DOM의 변화를 감시

하나 있어.auto-carousel링크된 요소의 하위 요소를 통해 반복되는 지시문입니다.

단, 자녀는 아직 DOM에 로드되지 않았습니다.그 이유는 자녀는ng-if의 표현식은 아직 해석되지 않았습니다.

부모 디렉티브에 DOM 트리가 변경되었음을 확인하려면 어떻게 해야 합니까?

        <ul class="unstyled" auto-carousel>
          <li class="slide" ng-if="name">{{name}}</li>
          ...
          <li class="slide" ng-if="email">{{email}}</li>
        </ul>

나는 할 수 있다$timeout믿을 수 없는 것 같아요나도 쓸 수 있어ng-show대신ng-if하지만 그건 질문에 답하지 않고 내가 필요한 것도 아니야

결국 이렇게 된 겁니다.

난 네가 함수를 넘겨줄 수 있다는 걸 알아냈어$scope.$watch여기서부터 변화를 주시하고 싶은 표현의 값을 반환하는 것은 매우 간단합니다.스코프의 속성에 대한 키 문자열을 전달하는 것과 동일하게 작동합니다.

link: function ($scope, $el, $attrs) {
  $scope.$watch(
    function () { return $el[0].childNodes.length; },
    function (newValue, oldValue) {
      if (newValue !== oldValue) {
        // code goes here
      }
    }
  );
}

보고 있다childNodes,것은 아니다.children왜냐하면childNodeslist에는 텍스트노드 및 코멘트뿐만 아니라 요소도 포함됩니다.Angular는 다음과 같은 지침에 코멘트 자리 표시자를 사용하기 때문에 이 기능은 매우 중요합니다.ng-repeat,ng-if,ng-switch그리고.ng-include트랜슬루션을 실행하여 DOM을 변경하는 한편,children요소만 포함됩니다.

요소의 돔에서 더 깊은 곳에 변화가 있는지 관찰할 필요가 있는 경우 MutationObserver를 사용하는 것이 좋습니다.

.directive('myDirective', function() {
    return {
        ...
        link: function(scope, element, attrs) {
            var observer = new MutationObserver(function(mutations) {
                // your code here ...
            });
            observer.observe(element[0], {
                childList: true,
                subtree: true
            });
        }
    };
});

이 앵글 돔 이벤트에 대한 지시 모듈을 만들었습니다.

당신의 경우,

    <ul class="unstyled" auto-carousel>
      <li class="slide" ng-if="name" dom-on-create="nameCreated()">{{name}}</li>
      <li class="slide" ng-if="email" dom-on-destroy="emailDestroyed()">{{email}}</li>
    </ul>

현재 지원만 가능dom-on-create그리고.dom-on-destroy단, $watch 콜백을 반복 체크하는 것이 아니라 각 돔이벤트에 대해1회밖에 기동하지 않기 때문에 허용 응답보다 퍼포먼스가 우수합니다.

angular의 권장사항에는 해당되지 않지만 요소 초기화 시 ng-init을 사용할 수 있습니다.

<ul class="unstyled" auto-carousel>
    <li class="slide" ng-if="name" ng-init="recheck()">{{name}}</li>
    <li class="slide" ng-if="email" ng-init="recheck()">{{email}}</li>
</ul>

링크 함수 내에서 먼저 지시 내용을 컴파일할 수 있습니다.예를 들어 다음과 같습니다.

angular.module('myApp').directive('autoCarousel', ['$compile', function ($compile) {

    return {
        templateUrl: 'views/auto-carousel.html',
        restrict: 'A',
        replace: true,
        link: function (scope, element, attr) {
            $compile(element.contents())(scope);

            // your code goes here
        }
    }
}]);

언급URL : https://stackoverflow.com/questions/21332671/angularjs-watch-dom-change