JavaScriptがバインドされていません

javascriptファイルとjsonファイルを自分のhtmlファイルにリンクしようとしていますが、動作していないようです。JavaScriptがバインドされていません

[ 
{ 
    "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ファイルさ：：私はしようとしている私の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>

：

(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ファイルです。ここ

はJSONファイルがあります私のimageArrayのカウントを表示するには2でなければなりませんが、今私が見ているのは実際の単語 'imageCount'だけです。

誰かが私が間違っているのを見ていますか？

出典

2017-07-16 Cameron

コンソールのエラーを確認してください。
$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>

出典

2017-07-16 02:34:47 Rayon

働いたおかげで、！ – Cameron

@Cameron - あなたの答えを見つけてうれしく思います。戻って、あなたの選択した正解としてRayonの答えをマークすることを忘れないでください！ –

JavaScriptがバインドされていません

答えて

関連する問題