Angularjs無法通過JSON數據從控制器

Question

來指導我是新來Angularjs，我想從控制器傳遞JSON數據directive.The結果是什麼表現，我得到了以下錯誤：

1。未捕獲的SyntaxError：意外令牌}在管線29

angular.js：38未被捕獲的錯誤：[$注射器：modulerr] http://errors.angularjs.org/1.3.14/ $注射器/ modulerr P0 = MyApp來& P1 =錯誤％3A％... gleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.3.14％2Fangular.min.js％3A17％3A381）

我不知道如何解決這個錯誤。

<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
<div ng-app="myApp" ng-controller="customersCtrl"> 
    <display simo='simo'></display> 
</div> 

<script> 
    var app = angular.module('myApp', []); 
    app.controller('customersCtrl', function($scope, $http) { 
    $http.jsonp("http://localhost/json/customer.php?callback=JSON_CALLBACK") 
     .success(function (data) { 
      $scope.simo = data; 
      console.log($scope.simo) 
     }); 

}); 

app.directive('display',function(){ 
    return { 
     restrict: 'E', 
     scope: { simo: '=' }, 
     template: '<li ng-repeat="x in simo">{{ x.Name + ', ' + x.Country }}</li>' 
    }; 
}); 
</script> 

編輯： 遠程文件

{ 
    "records": [ 
    { 
     "Name": "Alfreds Futterkiste", 
     "City": "Berlin", 
     "Country": "Germany" 
    }, 
    { 
     "Name": "Ana Trujillo Emparedados y helados", 
     "City": "México D.F.", 
     "Country": "Mexico" 
    }, 
    { 
     "Name": "Antonio Moreno Taquería", 
     "City": "México D.F.", 
     "Country": "Mexico" 
    }, 
    { 
     "Name": "Around the Horn", 
     "City": "London", 
     "Country": "UK" 
    }, 
    { 
     "Name": "B's Beverages", 
     "City": "London", 
     "Country": "UK" 
    }, 
    { 
     "Name": "Berglunds snabbköp", 
     "City": "Luleå", 
     "Country": "Sweden" 
    }, 
    { 
     "Name": "Blauer See Delikatessen", 
     "City": "Mannheim", 
     "Country": "Germany" 
    }, 
    { 
     "Name": "Blondel père et fils", 
     "City": "Strasbourg", 
     "Country": "France" 
    }, 
    { 
     "Name": "Bólido Comidas preparadas", 
     "City": "Madrid", 
     "Country": "Spain" 
    }, 
    { 
     "Name": "Bon app'", 
     "City": "Marseille", 
     "Country": "France" 
    }, 
    { 
     "Name": "Bottom-Dollar Marketse", 
     "City": "Tsawassen", 
     "Country": "Canada" 
    }, 
    { 
     "Name": "Cactus Comidas para llevar", 
     "City": "Buenos Aires", 
     "Country": "Argentina" 
    }, 
    { 
     "Name": "Centro comercial Moctezuma", 
     "City": "México D.F.", 
     "Country": "Mexico" 
    }, 
    { 
     "Name": "Chop-suey Chinese", 
     "City": "Bern", 
     "Country": "Switzerland" 
    }, 
    { 
     "Name": "Comércio Mineiro", 
     "City": "São Paulo", 
     "Country": "Brazil" 
    } 
    ] 
} 

Answer 1

我給這個一杆 http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular。 min.js「>

<script> 
    var app = angular.module('myApp', []); 
    app.controller('customersCtrl', function($scope, $http) { 
    $http.jsonp("http://localhost/json/customer.php?callback=JSON_CALLBACK") 
     .success(function (response) { 
      $scope.simo = response.data; 
      console.log($scope.simo) 
     }); 

}); 

app.directive('display',function(){ 
    return { 
     restrict: 'E', 
     scope: { simo: '=' }, 
     template: '<li ng-repeat="x in simo">{{ x.Name + ', ' + x.Country }}</li>' 
    }; 
}); 
</script> 

不知道你的意圖是整個響應對象傳遞給指令，但是response.data是您可能期望從ajax調用返回的位置。

除此之外，我會確保你的對象結構是正確的。或者，如果你要返回一個你在$ http調用中設置該標誌的數組。

Answer 2

@KKKKKKKK在評論中擊敗了我，但問題出在模板屬性中。例如（用靜態測試數據替換HTTP後端的呼叫，以便代碼可以在沒有它的情況下運行），以下工作：

<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
<div ng-app="myApp" ng-controller="customersCtrl"> 
    <display simo='simo'></display> 
</div> 

<script> 
    var app = angular.module('myApp', []); 
    app.controller('customersCtrl', function($scope, $http) { 
    $scope.simo = [{ 
     Name: 'Frodo', 
     Country: 'The Shire' 
    }, { 
     Name: 'Boromir', 
     Country: 'Gondor' 
    }]; 
    }); 

    app.directive('display',function() { 
    return { 
     restrict: 'E', 
     scope: { simo: '=' }, 
     template: '<li ng-repeat="x in simo">{{ x.Name }}, {{ x.Country }}</li>' 
    }; 
    }); 
</script>