Question

我一直在研究CodeSchool AngularJS应用程序，到目前为止我已经理解了，但是当我开始使用依赖注入时，特别是$ http为了调用我的JSON数据，应用程序停止工作，并且我不知道为什么。最初第一行没有注释，app应该使用闭包中声明的变量gems，这与products.json中现在完全相同的代码。我注释掉了控制器的第一行，并为依赖注入添加了相应的更改，但现在应用程序根本没有加载，并且它会抛出下面发现的错误（另请参阅$ http-injection.png）。 / p>

    app.controller('StoreController', [ '$http', function($http) {
    //this.products = gems; <-- works like this with data in closure
    var store = this;
    store.products = [ ]; // no erros on page load

    $http.get('/data/products.json').success(function( data ) {
        store.products = data;
    });
}]);

Error: [ngRepeat:dupes] http://errors.angularjs.org/1.3.0-beta.10/ngRepeat/dupes?p0=product%20in%20storeCtrl.products&p1=string%3A%0D
at Error (native)
at http://angularjs.dev/angular-1.3/angular.min.js:6:457
at http://angularjs.dev/angular-1.3/angular.min.js:204:24
at Object.<anonymous> (http://angularjs.dev/angular-1.3/angular.min.js:108:144)
at Object.applyFunction [as fn] (<anonymous>:778:50)
at g.$digest (http://angularjs.dev/angular-1.3/angular.min.js:109:211)
at g.$delegate.__proto__.$digest (<anonymous>:844:31)
at g.$apply (http://angularjs.dev/angular-1.3/angular.min.js:112:325)
at g.$delegate.__proto__.$apply (<anonymous>:855:30)
at g (http://angularjs.dev/angular-1.3/angular.min.js:73:287) angular.js:10811
(anonymous function) angular.js:10811
(anonymous function) angular.js:7962
g.$digest angular.js:12560
$delegate.__proto__.$digest VM8634:844
g.$apply angular.js:12858
$delegate.__proto__.$apply VM8634:855
g angular.js:7380
x angular.js:8527
y.onreadystatechange

product.json

[
{
    name: 'Hexagonal',
    price: 250.00,
    description: 'The six faces of the hexaonal gem have a habit to excite the eye, and attract good luck.',
    canPurchase: true,
    soldOut: false,
    images: [ ],
    reviews: [
        {
            stars: 5,
            body: "I love this product!",
            author: "mtpultz@gmail.com"
        },
        {
            stars: 1,
            body: "This product sucks!",
            author: "mtpultz@hater.com"
        }
    ]
},
{
    name: 'Dodecahedron',
    price: 1015.25,
    description: 'Some gems have hidden qualities beyond their luster, beyond their shine... Dodeca is one of those gems.',
    canPurchase: true,
    soldOut: false,
    images: [
        "img/gem-06.gif",
        "img/gem-02.gif",
        "img/gem-01.gif"
    ],
    reviews: [
        {
            stars: 3,
            body: "I think this gem was just OK, could honestly use more shine, IMO.",
            author: "mtpultz@hotmail.com"
        },
        {
            stars: 4,
            body: "Any gem with 12 faces is for me!",
            author: "mtpultz@casensitive.ca"
        }
    ]
},
{
    name: 'Pentagonal Gem',
    price: 5.95,
    description: 'Origin of the Pentagonal Gem is unknown, hence its low value.  It has a very high shine and 12 sides however.',
    canPurchase: true,
    soldOut: false,
    images: [
        "img/gem-02.gif",
        "img/gem-06.gif",
        "img/gem-01.gif"
    ],
    reviews: [
        {
            stars: 4,
            body: "The mystery of the Pentagonal Gem makes it sooo fascinating!",
            author: "mtpultz@peanutbutter.com"
        },
        {
            stars: 5,
            body: "I can't get enough of the five faces of the Pentagonal Gem!",
            author: "mtpultz@ketchup.ca"
        }
    ]
}

];

output of $http only dependency injection in chrome with batarang plugin

最初我打算尝试弄清楚如何使用$ log，当我注入了$ log时，看起来好像收到了json（参见$ http-and- $ log-injection.png附件）基于chrome batarang插件的输出，但app仍无法正常工作，只有JSON出现在batarang输出的右侧。

    app.controller('StoreController', [ '$http', '$log', function($http, $log) {
    //this.products = gems;
    var store = this;
    store.products = [ ]; // no erros on page load

    $http.get('/data/products.json').success(function( data ) {
        store.products = data;
    });
}]);

output of $http and $log dependency injection in chrome with batarang plugin

Answer 1

开发时不应使用缩小版Angular。使用非缩小版本时，您将获得更好的错误消息。但是，即使您使用缩小版本，也可以通过访问异常中首先提到的URL来了解问题：http://errors.angularjs.org/1.3.0-beta.10/ngRepeat/dupes?p0=product%20in%20storeCtrl.products&p1=string%3A%0D

看起来你在products.json中有重复项。没有看到products.json的全部内容或任何你最好的猜测标记。

-

更新：好像data是字符串而不是数组。这可能是因为来自服务器的响应主体没有正确格式化JSON。 ng-repeat不是遍历数组中的对象，而是遍历字符串中的字符，并在它检测到的第二个选项卡字符（编码为％0D）上引发错误。作为一个例子，我创建了一个具有正确和错误响应的plnkr：http://plnkr.co/edit/XbPuXkykzv36NyH3sSeu?p=preview

Answer 2

你应该使用$ scope：

$scope.store = {};
$scope.store.products = [ ]; // no erros on page load

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

Answer 3

如果ngRepeat:dupes表达式中存在重复键（数组/ json中的值），则会出现

ng-repeat错误，这是因为AngularJS使用键来关联DOM节点使用ng-repeated个项目。请求的数据products.json可能包含相同值的字段，要解决此问题，您可以在track by $index中附加ng-repeat表达式，以便DOM节点项的关联将是由您的数组/ json的索引键入，而不是每个项的值。

E.G。

<div ng-repeat="product in Store.products track by $index"></div>

$ http依赖注入抛出错误

3 个答案: