데이터를 채우고 표시 할 때 ng-grid 스타일이 바뀝니다.

Question

저는 Angularjs의 ng-grid 구성 요소에 대해 교육 중이며 오히려 실망한 문제가 있습니다. 기본적으로 흐름은 다음과 같습니다. 페이지가로드되고 버튼 만 표시됩니다. 버튼을 클릭하면 AJAX 요청이 json 데이터를 가져 와서 그리드에 바인딩합니다. 나는 모든 브라우저의 크기를 조정하면

, 올바른 크기로 다시 스냅 :

이

내가 먼저 버튼을 클릭하면 내가 볼 것입니다

내 컨트롤러는 다음과 같습니다 :

myAppModule.controller('PodcastController', function ($scope, $http) { 

    $scope.getData = function() { 
     $http.get('/Home/PodcastDataAsJson').success(function (data) { 
      $scope.podcasts = data; 
     }); 

     $scope.gridVisibilty = 'gridStyle'; 
    }; 

    $scope.gridOptions = { 
     data: 'podcasts', 
     columnDefs: [ 
      { field: 'Id', displayName: 'Id' }, 
      { field: 'Name', displayName: 'Name' }, 
      { field: 'Artist', displayName: 'Artist' } 
     ] 
    }; 

    $scope.gridVisibilty = 'notDisplayed'; 

}); 

보기는 다음과 같습니다

<div ng-app="gridExampleApp"> 
    <div ng-controller="PodcastController"> 

     <button ng-click="getData()">Click to get Data</button> 

     <div id="datagrid" ng-grid="gridOptions" class="ng-class: gridVisibilty;"></div> 

    </div> 
</div> 

012

.notDisplayed 
{ 
    display: none; 
} 

.displayed 
{ 
    display: block; 
    border: 1px solid rgb(212,212,212); 
    width: 800px; 
    height: 300px; 
} 

.gridStyle 
{ 
    display: block; 
    border: 1px solid rgb(212,212,212); 
    width: 400px; 
    height: 300px 
} 

나는이 날인지 알고 싶습니다, 또는 내가 각도 NG 그리드 친구들에 접수해야 버그 여부 : 3,516,

내 CSS는 다음과 같습니다.

건배

Answer 1

당신은 당신이 NG 그리드 스타일 시트를로드하는 방법을 보여주지 않았다하지만 직접 링크와 함께 그것을 얻을하려고 할 때 나는 비슷한 문제가 있었다.

다음은 ng-grid 스타일 시트 용 로컬 파일이있는 데모입니다 : http://plnkr.co/edit/2pq9YotA4RJIMll5BJvh?p=preview. 또한 podcast 변수에 바인드 된 ng-show 지시문을 격자 표시/숨기기 조건으로 사용했습니다.

index.html의 머리글에서 스타일 시트에 대한 직접 링크를 사용하려고하면 이상한 표시 효과가 있습니다. 그러나 동일한 코드를 로컬 파일에 넣으면 작동합니다.