角 - 控制器。然後調用指令後的函數，所以沒有數據有效的異步調用

Question

只是學習角。

我有一個基本上加載一些JSON的控制器。我試圖在我的指令中迭代這個。我在猜測我做錯了嗎？任何幫助表示讚賞。在調試器中，foreach永遠不會迭代，因爲範圍沒有數據。我猜這是異步電話的問題嗎？

我已經玩弄了$ scope.result的硬編碼，以便它可以同步加載到控制器中，並且工作正常。它只是異步。然後調用，似乎並沒有更新。

angular.module('dilApp') 

.controller('MainCtrl', function($scope, $http) { 
$scope.result = {}; 

$http.get('data/data.json') 
     .then(function(res){ 
      $scope.result = res.data;     
    }); 

該指令..

.directive('myTable', function() { 
    return { 
     restrict: 'E', 
     link: function ($scope, element, attrs) { 

      var html = '<table>'; 
      angular.forEach($scope.result, function (row, index) { 
       ..... 
      }) 
      html += '</table>';   
      element.replaceWith(html) 
     } 
    } 
}); 

此外，當我對異步調用的JSON斷點。我可以看到加載的「正確」動態數據。我偶然發現了鏈接函數中的$ watch屬性，但是我不能得到任何好運。編輯 - 添加到指令的鏈接方法。當我的$ http.get方法被觸發時，我現在可以正確地看到這個消息。我只是不確定如何從鏈接中獲取已經呈現的HTML來進行更新。

$scope.$watch('result', function($scope){ 
       // $scope has new data how do I get the template to update ?? 
     }); 

Answer 1

嘗試使用返回的$ http對象的成功和錯誤方法，如果你只是想設置一個值。這些方法特定於$ http返回的對象。

$http.get('data/data.json') 
    .success(function(data, status, headers, config){ 
    $scope.result = data;     
    }) 
    .error(function(data, status, headers, config){ 
    console.log(data); 
)}; 

您收到的任何錯誤也可能有幫助。

此外，您可能不想通過引用$scope.result將您的指令與控制器緊密結合。您可能只想傳遞數據以呈現屬性，在這種情況下egghead.io有關於該主題的一些精彩教程（指令隔離範圍）。