2013-06-27 1 views
0

다음은 코드입니다.AngularJs Grid - 이벤트에서 코드를 배치 할 때 작동하지 않습니다.

작동 버전 - 그리드 표시 및 페이지로드.

<html ng-app="myApp"> 
<head lang="en"> 
    <meta charset="utf-8"> 
    <title>Getting Started With ngGrid Example</title> 
    <link href="http://localhost:4090/Content/ng-grid.min.css" rel="stylesheet" type="text/css" /> 
    <script src="http://localhost:4090/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script> 
    <script src="http://localhost:4090/Scripts/angular.js" type="text/javascript"></script> 
    <script src="http://localhost:4090/Scripts/ng-grid-2.0.6.min.js" type="text/javascript"></script> 
    <script> 
     // main.js 
     var app = angular.module('myApp', ['ngGrid']); 
     app.controller('MyCtrl', function ($scope) { 
      $scope.myData = [{ name: "Moroni", age: 50 }, 
        { name: "Tiancum", age: 43 }, 
        { name: "Jacob", age: 27 }, 
        { name: "Nephi", age: 29 }, 
        { name: "Enos", age: 34}]; 
      $scope.gridOptions = { data: 'myData' }; 
     }); 

    </script> 
</head> 
<body ng-controller="MyCtrl"> 
    <div class="gridStyle" ng-grid="gridOptions"> 
    </div> 
</body> 
</html> 

작동하지 않는 버전입니다. 버튼 클릭 아래에서 격자 코드를 이동했습니다.

<html ng-app="myApp"> 
<head lang="en"> 
    <meta charset="utf-8"> 
    <title>Getting Started With ngGrid Example</title> 
    <link href="http://localhost:4090/Content/ng-grid.min.css" rel="stylesheet" type="text/css" /> 
    <script src="http://localhost:4090/Scripts/jquery-1.9.1.min.js" type="text/javascript"></script> 
    <script src="http://localhost:4090/Scripts/angular.js" type="text/javascript"></script> 
    <script src="http://localhost:4090/Scripts/ng-grid-2.0.6.min.js" type="text/javascript"></script> 
    <script> 
     // main.js 
     var app = angular.module('myApp', ['ngGrid']); 
     app.controller('MyCtrl', function ($scope) { 
      $scope.LoadGrid = function() { 
       alert(''); 
       $scope.myData = [{ name: "Moroni", age: 50 }, 
        { name: "Tiancum", age: 43 }, 
        { name: "Jacob", age: 27 }, 
        { name: "Nephi", age: 29 }, 
        { name: "Enos", age: 34}]; 
       $scope.gridOptions = { data: 'myData' }; 
      } 
     }); 

    </script> 
</head> 
<body ng-controller="MyCtrl"> 
    <button id="click" ng-click="LoadGrid()"> 
     Load Grid</button> 
    <div class="gridStyle" ng-grid="gridOptions"> 
    </div> 
</body> 
</html> 

오류를 가져 오기 : - 형식 오류가 : 마지막 (도 빠르게로드)하기 전에 끝 부분에있는 태그 정의되지 않은

+0

일부 코드를 게시하고 좋은 답변을 원한다면 도움을 받아야합니다. 그렇지 않으면 도움이되지 않을 수도 있습니다. –

+0

나는 비슷한 질문을 가지고 있으며 [답변] [1]을 받았습니다. [1] : http://stackoverflow.com/a/19342597/1870830 – offset

답변

10

$ scope.gridOptions을 인스턴스화하기 전에 ng-grid가 초기화되지 않고 정의되지 않은 오류가 발생합니다. 또한 $ scope 속성을 프로그래밍 방식으로 변경하면 $ apply를 사용하여 변경 사항을 템플릿에 표시해야 할 수도 있습니다.

다음
app.controller('MyCtrl', function ($scope) { 
     $scope.myData = []; 
     $scope.gridOptions = { data: 'myData' }; 
     $scope.LoadGrid = function() { 
      alert(''); 
      $scope.myData = [{ name: "Moroni", age: 50 }, 
       { name: "Tiancum", age: 43 }, 
       { name: "Jacob", age: 27 }, 
       { name: "Nephi", age: 29 }, 
       { name: "Enos", age: 34}]; 
      $scope.$apply(); 
     } 
    }); 

가 편집 plunkr입니다 :

그래서 당신이해야 할 일을 데이터 그리드를 "시작"할 때 적용되는 데이터 구조가 존재해야합니다 (비어 경우에도)와 $ 전화입니다 ngGrid 예제 페이지에서이 작업을 보여줍니다. http://plnkr.co/edit/SnJ9J0?p=preview

+0

감사합니다. 나는 지금 일할 수있다. 고마워. – superboy

0

이동의 특성 'gridDim'을 설정할 수 없습니다.

나는 HTML이 준비되기 전에 자바 스크립트가로드되기 때문에 오류라고 생각합니다.

콘솔 오류 로그에 다른 내용이 있습니까?

0

실제로 데이터가 도착하기 전에 gridOptions를 정의해도됩니다. 그것은 Angular가 데이터를 바인딩하는 방식에 대한 멋진 부분입니다. 데이터를 $ scope 객체로 설정하면 결국 데이터가 & 데이터 항목의 내부 $ watch로 자체를 업데이트 할 수 있습니다.

관련 문제