我正在尝试将我的javascript文件和json文件链接到我的html文件，但它似乎不起作用。
这是 json 文件：
[
{
"tops" : [
{ "image" : "images/top1.jpg" },
{ "image" : "images/top2.jpg" },
{ "image" : "images/top3.jpg" },
{ "image" : "images/top4.jpg" }
]
},
{
"bottoms" : [
{ "image" : "images/jeans1.jpg" },
{ "image" : "images/jeans2.jpg" },
{ "image" : "images/jeans3.jpg" },
{ "image" : "images/jeans4.jpg" }
]
}
]
这是javascript文件：
(function(){
var app = angular.module('myContent', []);
app.controller('ContentController', ['$scope', 'http', function ($scope,$http) {
$http.get('imagedata.json').then(function(contentData){
$scope.imageArray = contentData.data;
$scope.imageCount = $scope.imageArray.length;
});
}]);
})();
这是 html 文件：
<!DOCTYPE html>
<html lang="en" ng-app="myContent">
<head>
<meta charset="UTF-8">
<title>ShopME Tops</title>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript" src="myscript.js"></script>
</head>
<body>
<!-- Container for grid layout -->
<div ng-controller="ContentController" class="container">
<!-- Container for row -->
<div class="row">
<!-- Container for col -->
<div> {{ imageCount }}</div>
</div>
</div>
</body>
</html>
在我的 html 文件中，我试图显示我的 imageArray 的计数，它应该是 2，但现在我看到的只是实际的单词"imageCount"。
有人看到我做错了什么吗？
-
检查控制台是否有错误。
-
在依赖项中使用
$http，而不是http模块。
(function() {
var app = angular.module('myContent', []);
app.controller('ContentController', ['$scope', '$http', function($scope, $http) {
var contentData = [{
"tops": [{
"image": "images/top1.jpg"
},
{
"image": "images/top2.jpg"
},
{
"image": "images/top3.jpg"
},
{
"image": "images/top4.jpg"
}
]
},
{
"bottoms": [{
"image": "images/jeans1.jpg"
},
{
"image": "images/jeans2.jpg"
},
{
"image": "images/jeans3.jpg"
},
{
"image": "images/jeans4.jpg"
}
]
}
];
$scope.imageArray = contentData;
$scope.imageCount = $scope.imageArray.length;
}]);
})();<!DOCTYPE html>
<html lang="en" ng-app="myContent">
<head>
<meta charset="UTF-8">
<title>ShopME Tops</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript" src="myscript.js"></script>
</head>
<body>
<div ng-controller="ContentController" class="container">
<div class="row">
<div> {{ imageCount }}</div>
</div>
</div>
</body>
</html>