source

$digest 이후 angularjs 워치 실행 연기(DOM 이벤트 상승)

factcode 2023. 2. 17. 21:42
반응형

$digest 이후 angularjs 워치 실행 연기(DOM 이벤트 상승)

DOM 이벤트를 트리거하는 워치가 있습니다.

scope.$watch(function() { return controller.selected; }, function(selected) {
    if (selected) {
        $input.trigger('focus');
    }
});

문제는 '포커스'에 대한 핸들러가 있다는 것입니다.scope.$apply.

$input.bind('focus', function() {
    scope.$apply(function() { controller.focused = true; });
});

그래서 제가$watch내부로부터 발사되다$digest다른 것을 트리거하려고 하기 때문에 에러가 발생합니다.$digest.

제가 가지고 있는 회피책은 방아쇠를 당기는 것입니다.$timeout.

scope.$watch(function() { return controller.selected; }, function(selected) {
    if (selected) {
        $timeout(function() { $input.trigger('focus'); });
    }
});

아직까진 효과가 있어이게 이 일을 처리하는 올바른 방법인가요?이것이 모든 케이스를 포착할 수 있을지는 확실하지 않으며, 다이제스트 후에 코드를 연기할 수 있는 각도로 승인된 방법이 있는지 확인하고 싶습니다.

감사합니다!

$digest는 보통 다이제스트 사이클 후(및 브라우저 렌더링 후) 실행 시 사용됩니다.

$timeout함수가 실행된 후 다른 다이제스트 사이클이 실행됩니다.만약 당신이triggerAngular에는 영향을 주지 않습니다.invokeApply에 대한 의론.false다른 다이제스트 사이클을 실행하지 않도록 합니다.

브라우저가 렌더링하기 전에 콜백을 실행하는 경우: 코드를 큐잉하는 경우$evalAsync 명령어에서는 DOM이 Angular에 의해 조작된 후 브라우저가 렌더링하기 전에 실행해야 합니다.단, 코드가 큐잉되어 있는 경우$evalAsync 컨트롤러에서 DOM이 Angular에 의해 조작되기 전에(및 브라우저가 렌더링하기 전에) 실행됩니다.https://stackoverflow.com/a/17303759/215945 도 참조해 주세요.

모든 사람이 말하듯이 컨트롤러에서 DOM 작업을 수행하면 안 됩니다.

다음은 초점을 맞추기 위해 양방향 데이터 바인딩을 적용하는 솔루션입니다.이제 당신의 초점은 변수에 묶여있다.따라서 변수를 참으로 설정하면 해당 요소에 포커스가 설정되고 요소가 포커스를 받으면 변수가 설정됩니다.

http://plnkr.co/edit/CvPCVxy4MfJEM1UksrrA?p=preview

이것으로 컨트롤러 코드에서 포커스를 분리했습니다.또한 $timeout 문제도 모두 해결됩니다(아마도 ).주의할 필요가 있는 것은, 2개의 다른 요소의 포커스에 바인드 하기 위해서 같은 변수를 사용하지 않는 것 뿐입니다.

EDIT : 이전 플랭크가 정상적으로 동작하지 않았기 때문에 업데이트 되었습니다.

언급URL : https://stackoverflow.com/questions/16066239/defer-angularjs-watch-execution-after-digest-raising-dom-event

반응형