Question

我正在尝试直接建立一个基于臭名昭着的angular-phonecat的练习网站，该网站会显示一些文本文档的可搜索列表。我将逐步完成本教程，只需使用我自己的文本文档查找并替换该死的手机。它一直工作到我试图在控制器模块（AngularJS docs tutorial step 5）中使用$ http依赖注入。

这是我得到的。

在我的 index.html ：

中

<!DOCTYPE html>
<html lang="en" ng-app="workcatApp">
...
<body ng-controller="WorkListCtrl">
...
 <input ng-model="query" type="text" class="form-control" title="Enter keyword(s) to find" placeholder="Search...">
...
 <div>
  <select ng-model="orderProp">
    <option value="name">Alphabetical</option>
    <option value="dateCreated">Newest</option>
  </select> 
  <ul class="works">
    <li ng-repeat="work in works | filter:query | orderBy:orderProp">
       <span>{{work.name}}</span>
       <p>{{work.author}}</p>
    </li>
  </ul>
 </div>
...
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>

在我的 js / controllers.js＆＃39; ：

中

var workcatApp = angular.module('workcatApp', []);

workcatApp.controller('WorkListCtrl', ['$scope', '$http', 
  function ($scope, $http) {
    $http.get('works/works.json').success(function(data) {
      $scope.works = data;
    });

    $scope.orderProp = 'dateCreated';
}]);

最后，在我的 works / works.json ：

中

[
{
    "dateCreated": 2010-09-26, 
    "id": "user_Jeff_CS35552Paper1", 
    "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", 
    "name": "CS355 5%2 Paper #1", 
    "author": "userJeff"
},
...

在浏览器中，我让选择器通过，但{{work.name}}和{{work.author}}并没有转化为角度魔法。任何智慧的话都会受到赞赏。

Answer 1

尝试这种方式，您的视图应该能够使用这种类型的分配来选择数据。

如果有效，那么您可以将问题缩小到如何进行http调用。否则我可以看一些其他问题。

workcatApp.controller('WorkListCtrl', ['$scope', '$http', 
   function ($scope, $http) {
   $scope.works = [{
       "dateCreated": 2010-09-26, 
       "id": "user_Jeff_CS35552Paper1", 
       "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", 
       "name": "CS355 5%2 Paper #1", 
       "author": "userJeff"
      }]

   /*$http.get('works/works.json').success(function(data) {
      $scope.works = data;
   });*/

   $scope.orderProp = 'dateCreated';
}]);

Answer 2

谢谢大家。我搞定了。我认为Angular因为“dateCreated”数据类型而弄乱了我的JSON（works.json）。我有YYYY-MM-DD，当我把它改成“YYYYMMDD”时它工作正常。

angular.js失败中的局部依赖注入

2 个答案: