Angular.js無法將JSON數據傳遞給控制器​​的指令

Question

我是Angularjs的新手，我試圖將json數據從控制器傳遞到指令，結果未顯示任何內容，並且出現以下錯誤：

1.第29行出現未捕獲的SyntaxError：意外令牌}。

2. angular.js：38未捕獲的錯誤：[$ injector：modulerr] http://errors.angularjs.org/1.3.14/ $ injector / modulerr？p0 = myApp＆p1 = Error％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>