각도 재질 탭 지연로드

최근에 AngularJS를 사용하기 시작했지만 MD- 탭 (https://material.angularjs.org/latest/demo/tabs)을 사용할 때 문제가 발생했습니다.각도 재질 탭 지연로드

내 페이지에는 여러 개의 탭이 있으며 대략 30 개의 이미지가 ng-repeat를 통해 각 탭에 배치되어 있습니다. 문제는 페이지를 열 때 오랜 시간이 걸릴 때 모든 탭의 모든 이미지가로드된다는 것입니다. 페이지가 열릴 때 첫 번째 (활성) 탭의 컨텐트 만로드되고 다른 모든 탭의 컨텐트는 활성화 될 때만로드되는 것이 더 좋을 것입니다.

<md-content> 
    <md-tabs md-dynamic-height md-border-bottom md-stretch-tabs="always"> 
     <md-tab label="Tab One"> 
      <md-content class="md-padding"> 
       <div ng-repeat="fruit in Fruits"> 
        <img ng-src="images/{{ fruit.FruitId }}.png"> 
        <h4>{{ fruit.Name }}</h4> 
       </div> 
      </md-content> 
     </md-tab> 

     <md-tab label="Tab Two"> 
      <md-content class="md-padding"> 
       <div ng-repeat="veg in Vegetable"> 
        <img ng-src="images/{{ veg.VegId }}.png"> 
        <h4>{{ veg.Name }}</h4> 
       </div> 
      </md-content> 
     </md-tab> 

     <md-tab label="Tab Three"> 
      <md-content class="md-padding"> 
       <div ng-repeat="animal in Animals"> 
        <img ng-src="images/{{ animal.AnimalId }}.png"> 
        <h4>{{ animal.Name }}</h4> 
       </div> 
      </md-content> 
     </md-tab> 
    </md-tabs> 
</md-content>

그래서 기본적으로 내가하고 싶은 '게으른로드'각 탭의 내용 관련 탭을 선택 내용 만로드되도록입니다 :

여기 탭에 대한 내 코드입니다.

저는 Angular를 처음 접했기 때문에이 문제에 어떻게 접근해야하는지 확신 할 수 없습니다. 나는 그것이 문제 (https://github.com/angular/material/issues/5500)로 부각되었지만 해결책은 아직 제시되지 않았다.

ng-if와 ng-include의 조합을 사용하여 선택한 탭에 콘텐츠를 동적으로 추가 할 생각 이었지만이 방법으로 시작할 위치를 알 수 없습니다.

어떤 도움을 크게 감상 할 수

출처

2017-05-19 php123

md-tabs 예를 들어 부동산 md-selected

있습니다

<md-tabs 
     md-selected="selectedIndex" 
     md-center-tabs="true" 
     md-stretch-tabs="always" 
     md-dynamic-height 
     md-border-bottom="">

당신은 사용자가 같은 새 탭을 선택하면 트리거됩니다 감시자 만들 수 있습니다

를

$scope.$watch(function() { 
     return $scope.selectedIndex; 
    }, 
    function (newVal, oldVal) { 

    if (newVal !== undefined && newVal !== oldVal){ 
      // load other images 
    } 
});

출처

2017-05-19 17:50:15

sim 첫 번째로 탭을 선택하고 플래그가 true가 될 때까지 콘텐츠 DOM을 작성하기 위해 대기하는 경우 플래그를 true로 설정하는 것이 좋습니다. 이처럼해야 할 것 :

사용 md-on-select="::tabXXDisplayed=true"합니다 (:: 만들 표현 한 번 표현) 탭에

사용 ng-if="tabXXDisplayed"

<md-tab md-on-select="::tabXXDisplayed = true"> 
    <md-tab-label>tabXX</md-tab-label>' + 
    <md-tab-body> 
     <div ng-if="tabXXDisplayed"> 
     // your content for tabXX here 
     </div> 
    </md-tab-body> 
    </md-tab>

: 여기

콘텐츠은 예시이며 snipplet

출처

2017-06-24 10:16:41 Waruyama

각도 재질 탭 지연로드

답변

관련 문제