Angularjs无法将json数据传递给控制器​​的指令

Question

我是Angularjs的新手，我正在尝试将json数据从控制器传递给指令。结果没有显示，我收到以下错误：

第1行中的

1.Uncaught SyntaxError：Unexpected token}。

1. angular.js：38未捕获错误：[$ injector：modulerr] http://errors.angularjs.org/1.3.14/ $ injector / modulerr？p0 = myApp＆amp; 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>