Локальная инъекция зависимости в ошибке angular.js

Я пытаюсь создать сайт практики, основанный непосредственно на пресловутом angular-phonecat, который будет отображать список доступных для поиска нескольких текстовых документов. Я буквально шаг за шагом с помощью учебника, просто нахожу и заменяю проклятые телефоны своими текстовыми документами. Он работал до тех пор, пока не попытался использовать инъекцию зависимостей $ http в модуле контроллера (AngularJS docs tutorial step 5).Локальная инъекция зависимости в ошибке angular.js

Вот что я получил.

В моих 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':

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.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}} не переводят угловую магию. Любые слова мудрости будут оценены.

источник

2014-12-29 irbanana

Я бы предложил сначала определить этот work.json в самом контроллере, а затем попытаться переместить этот json в файл, и если после этого он не будет работать, вы точно знаете, что проблема в том, как вы извлекаете данные от json. –

Вы напечатали '$ scope.works' в контроллере? –

@ShashankAgrawal Что вы имеете в виду, напечатав? если вы напечатали, вы имеете в виду, что нужно поставить инструкцию 'console.log', чтобы проверить, назначено ли значение для работы, и это тоже должно помочь. –

Попробуйте этот способ, ваш взгляд должен быть в состоянии выбирать данные, используя этот тип назначения.

Если это работает, вы можете сузить проблему до того, как вы делаете 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'; 
}]);

источник

2014-12-29 07:51:03

Спасибо всем. Я заработал. Я думаю, что Angular испортил мой JSON (works.json) из-за типа dataCreated. У меня был YYYY-MM-DD, и когда я изменил его на «YYYYMMDD», он отлично работает.

источник

2014-12-29 17:23:24 irbanana

Локальная инъекция зависимости в ошибке angular.js

ответ

Смежные вопросы