사전 렌더링 각도 UI 모달

저는 AngularJs와의 대화 상자를 여는 데 Anuglar UI Bootstrap Modal을 사용하고 있으며 모달을 처음 열 때 성능이 저하됩니다. 대화 상자가 나타나면 페이지에 숨겨진 요소 중 일부가 눈에 띄게 끊어 지거나 깜박입니다. 모달이 대화 상자를 여는 모든 후속 시간은 말더듬없이 부드럽게 나타납니다.사전 렌더링 각도 UI 모달

이것은보기를 컴파일 할 때 한 번 계산상의 오버 헤드가 있다고 가정합니다. 사용자가 대화 상자를 열면 준비가 완료 될 수 있도록 내 앱 백그라운드에서 모달을 미리 컴파일 할 수있는 방법이 있습니까?

나는 그렇게

$uibModal.open({ 
    templateUrl:'my-modal.html', 
    controller:'MyModalCtrl' 
});

나는 지침이 같은 시도처럼 각도 UI 모달 서비스를 사용하고 있지만 컨트롤러/대화를 위해 일하는 것이 뭔가를해야합니다.

var directive = $compile("<my-directive></my-directive>"); 
var instance = directive(scope.$new(true));

나는 1.3 이 문제는 모든 브라우저에서 데스크톱 및 모바일에 나타 부트 스트랩 각도-UI-각도 1.5.8 등을 사용하고

하지만, 낮은 전원 하드웨어에 가장 눈에 띄는 (전화, 태블릿)

모달도 개방하기 전에 데이터를 만들기 위해

https://embed.plnkr.co/hDM6GrUh8droo988MOox/

출처

2016-10-04 Stephen Marsh

내 자신에게이 문제가 없었으며 Google지도 내부와 같은 경우에도 광범위하게 모덜을 사용했습니다. 문제를 재현하는 데모를 작성하십시오 – charlietfl

보세요. 다른 접근법을 사용합니다. 클래스 모달로 div를 만들고 div에 을 사용하여 템플릿을 즉시 포함시킵니다. –

를 사용하여 해결 준비가 된 것입니다.

다음은 문서의 예입니다.

var modalInstance = $uibModal.open({ 
     animation: $ctrl.animationsEnabled, 
     ariaLabelledBy: 'modal-title', 
     ariaDescribedBy: 'modal-body', 
     templateUrl: 'myModalContent.html', 
     controller: 'ModalInstanceCtrl', 
     controllerAs: '$ctrl', 
     size: size, 
     resolve: { 
     items: function() { 
      return $ctrl.items; 
     } 
     } 
    });

또한, 멀리에서 얻을 {{}} 모달에 (즉, 당신이 사용중인 인 경우) 대신 사용 NG-바인드.

출처

2016-10-04 19:11:02 defaultcheckbox

양식이 사용하는 데이터가 이미 미리로드되어 있으므로 문제가되지 않습니다. 뷰를 열면 데이터가로드되지 않습니다. 문제는보기를 렌더링하는 것 같습니다. 첫 번째 모달이 열릴 때만 발생합니다. 다른 모든 시간은 부드럽게 열립니다. –

좋아, 나는 제한된 정보 때문에 가정을하고 있었다. @charlietfl 언급했듯이 문제를 재현하는 데모를 만들 수 있습니까? – defaultcheckbox

여기 내 기본적인 상황이 있습니다. 이것은 효과를 극적으로 보여주지는 않지만 이후 호출에 비해 처음으로 모달이 조금 느리게 열리는 것을 볼 수 있습니다. 또한 이것은 하드웨어에 의존하는 것으로 보인다. 더 빨라진 CPU/GPU에는이 기능이 표시되지 않을 수 있습니다. iPhone에서는 효과가 예를 들어 더 두드러집니다. https://embed.plnkr.co/hDM6GrUh8droo988MOox/ –

사전 렌더링 각도 UI 모달

답변

관련 문제