JSONデータは、divの上NG-INITにロードしていない、それはボタン

Question

にNGクリックでロードだ私は、コントローラで$スコープオブジェクトに添付されたデータを持っているだけで、この

  $scope.result = []; 
    $scope.jsonData = function() { 
      var result = []; 
      var keys = $scope.data[0]; 

      for (var i = 1; i < $scope.data.length; i++) { 
       var item = {}; 
       item[keys[0]] = $scope.data[i][0]; 
       item[keys[1]] = $scope.data[i][1]; 
       item[keys[2]] = $scope.data[i][2]; 
       $scope.result.push(item); 
      } 
      console.log($scope.result); 
}; 

ように私は、このデータにアクセスすることができています唯一のNGクリックディレクティブ

<button ng-click="jsonData()"> 
       <table border="1"> 
        <tr ng-repeat="x in result"> 
         <td>{{x.Name}}</td> 
         <td>{{x.Age}}</td> 
         <td>{{x.Address}}</td> 
        </tr> 
       </table> 
      </button> 

を使用してHTMLのボタンをクリックしながら、しかし、私はNG-のinitディレクティブを使用してJSONデータにアクセスすることができません。私は間違って何かしていますか？

<div ng-init="jsonData()"> 
       <table border="1"> 
        <tr ng-repeat="x in result"> 
         <td>{{x.Name}}</td> 
         <td>{{x.Age}}</td> 
         <td>{{x.Address}}</td> 
        </tr> 
       </table> 
      </div> 

Answer 1

なぜこのようにng-initを使用していますか？ドキュメントを見てみましょう：私は見ることができないあなたのコントローラに多くのコードがある場合を除き

ng-init documentation

これはNG-のinitのための有効な利用の場合のようには見えません。

私はあなたのdivにNG-INITを取り除くだけ呼び出すことによって、あなたのコントローラに直接関数を実行になるだろう：

$scope.jsonData(); 

をあなたが関数を定義した直後。このように：

$scope.result = []; 
$scope.jsonData = function() { 
     var result = []; 
     var keys = $scope.data[0]; 

     for (var i = 1; i < $scope.data.length; i++) { 
      var item = {}; 
      item[keys[0]] = $scope.data[i][0]; 
      item[keys[1]] = $scope.data[i][1]; 
      item[keys[2]] = $scope.data[i][2]; 
      $scope.result.push(item); 
     } 
     console.log($scope.result); 
}; 
$scope.jsonData(); 

Answer 2

問題の原因は、データがサーバーから到着する前にng-initディレクティブが実行されていることです。コントローラで

、スコープにデータを置く約束から鎖：MV *フレームワークにおいて

$http.get(url).then(function(response) { 
    $scope.data = response.data; 
}).then(function() { 
    $scope.jsonData(); 
}); 

は、コントローラがモデルを作成し、フレームワークは、DOMにモデルをマッピングします。次に、フレームワークはユーザからイベントを収集し、コントローラに通知してモデルを更新します。

ng-initによってDOMの開始があると、ZEN of Angularの違反になります。

DOM操作をアプリロジックから切り離すことは非常に良いアイデアです。これにより、コードのテスト容易性が大幅に向上します。アプリのシーケンシングとロジックをng-initディレクティブに結合すると、コードは壊れやすくなり、テストが難しくなり、保守が難しくなり、エラーが発生しやすくなります。