AngularJS에“새로 고침”을 지시하는 방법


168

사용자 지정 지시문의 범위를 벗어나는 click 이벤트가 있으므로 "ng-click"속성을 사용하는 대신 jQuery.click () 리스너를 사용하고 다음과 같이 범위 내에서 함수를 호출합니다.

$('html').click(function(e) {
  scope.close();
);

close ()는 다음과 같은 간단한 함수입니다.

scope.close = function() {
  scope.isOpen = false;
}

내 생각에는 다음과 같이 "ng-show"가 isOpen에 바인딩 된 요소가 있습니다.

<div ng-show="isOpen">My Div</div>

디버깅 할 때 close ()가 호출되고 isOpen이 false로 업데이트되고 있지만 AngularJS보기가 업데이트되지 않는다는 것을 알았습니다. Angular에게 수동으로 뷰를 업데이트하도록 지시 할 수있는 방법이 있습니까? 아니면 내가 보지 못한이 문제를 해결하기위한 더 "Angular"접근법이 있습니까?

답변:


315

해결책은 전화했다 ...

$scope.$apply();

... 내 jQuery 이벤트 콜백에서.


9
이 링크가 도움이 될 것입니다. jimhoskins.com/2012/12/17/angularjs-and-apply.html
Roman Sklyarov

6
해서는 안 $scope.$apply();됩니까?
ErichBSchulz

$ scope 또는 scope을 모두 사용할 수 있습니다. 표기법의 차이 일 뿐이지 만 결과는 같습니다.
user1226868

4
@ErichBSchulz-지시문에서 종종 스코프와 컨트롤러에 주입되는 '$ scope'를 구별 할 가능성이있는 $없이 스코프를 사용하는 것을 봅니다. 컨트롤러에서는 $ scope로 참조하는 것이 중요하므로 Angular는 어떤 종속성을 삽입해야하는지 알지만 지시문 링크 함수에서는 항상 같은 4 개의 요소를 서수로 전달하며 특정 이름 (범위, 요소, attrs, 컨트롤러가 필요하지 않음) ).
cchamberlain

30

왜 전화 $apply해야합니까?

TL; DR : Angular 외부 에서 $apply변경 한 내용을 적용 할 때마다 호출해야합니다 .


@Dustin의 답변 을 업데이트하기 위해 $ apply가 정확히 무엇을 하고 작동 하는지에 대한 설명이 있습니다.

$apply()AngularJS 프레임 워크 외부에서 AngularJS의 표현식을 실행하는 데 사용됩니다. (예 : 브라우저 DOM 이벤트, setTimeout, XHR 또는 타사 라이브러리). 우리는 AngularJS 프레임 워크를 호출하기 때문에 예외 처리 , 감시 실행 의 적절한 범위 수명주기를 수행해야합니다 .

각도를 사용하면 모든 값을 바인딩 대상으로 사용할 수 있습니다. 그런 다음 JavaScript 코드 회전이 끝나면 값이 변경되었는지 확인합니다. 바인딩 값이 변경되었는지 확인하는 단계에는 실제로 $scope.$digest()1 메소드가 있습니다. 우리는 $scope.$apply()대신 (을 호출 할 $scope.$digest) 대신 직접 호출하지 않습니다 .

Angular는 표현식에 사용 된 변수와 $watch범위 내 생활 내부의 모든 항목 만 모니터링합니다 . 따라서 Angular 컨텍스트 외부에서 모델을 변경하는 경우 $scope.$apply()해당 변경 사항을 전파해야합니다. 그렇지 않으면 Angular는 변경 사항을 알지 못하므로 바인딩이 업데이트되지 않습니다 2 .


14

사용하다

$route.reload();

$route컨트롤러 에 주입 하십시오.


5
또한 ui-router를 사용할 때$state.reload()
Jeffrey Roosendaal

스크린 샷 테스트에 매우 도움이되었습니다. 우리는 상태를 조롱하지만 때로는 변경 사항을 감시하는 감시자가 없어도 혼란스러워 지거나 간헐적으로 실패 할 수 있습니다. 그러나 이와 같이 범위를 다시로드 할 수 있으면 그와 싸우는 데 도움이됩니다.
theblang
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.