[英]Angularjs Can't pass json data to directive from controller
我是Angularjs的新手,我试图将json数据从控制器传递到指令,结果未显示任何内容,并且出现以下错误:
1.第29行出现未捕获的SyntaxError:意外令牌}。
我不知道确切如何解决此错误。
<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"
}
]
}
我可以试一下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调用中设置该标志。
@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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.