Javascript不绑定_Javascript_Json_Data Binding_Binding

Javascript不绑定

javascript json data-binding binding

Javascript不绑定,javascript,json,data-binding,binding,Javascript,Json,Data Binding,Binding,我试图将我的javascript文件和json文件链接到我的html文件，但它似乎不起作用以下是json文件： [ { "tops" : [ { "image" : "images/top1.jpg" }, { "image" : "images/top2.jpg" }, { "image" : "images/top3.jpg" }, { "image" : "images/top4.jpg" } ] }, {

我试图将我的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模块

作用{ var app=angular.module'myContent'，[]； app.controller'ContentController'，['$scope'，'$http'，函数$scope，$http{ var contentData=[{ 顶部：[{ 图片：images/top1.jpg }, { 图片：images/top2.jpg }, { 图片：images/top3.jpg }, { 图片：images/top4.jpg } ] }, { 底部：[{ 图片：images/jeans1.jpg }, { 图片：images/jeans2.jpg }, { 图片：images/jeans3.jpg }, { 图片：images/jeans4.jpg } ] } ]; $scope.imageArray=contentData； $scope.imageCount=$scope.imageArray.length； }]; }; 店顶 {{imageCount}}

@Cameron-很高兴你找到了答案-别忘了回来，把Rayon的答案标记为你选择的正确答案！