Javascript不绑定答案

【问题标题】：Javascript not bindingJavascript不绑定
【发布时间】：2017-12-20 19:42:55
【问题描述】：

我正在尝试将我的 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”。

有人看到我做错了吗？

【问题讨论】：

标签： javascript json data-binding binding

【解决方案1】：

检查控制台是否有错误。
在依赖项中使用 $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>

【讨论】：

@Cameron -- 很高兴您找到了答案 -- 不要忘记回来并将 Rayon 的答案标记为您选择的正确答案！