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>