0

私はAngularJSを初めて使用します。これは、あらゆる種類の JS への私の最初の進出です。

これが私がやろうとしていることの簡単な概要です。

ユーザーが検索する用語を入力すると、Twitter から情報が取得されます。ツイートは ng-repeat で表示されます (私の問題をさらにイライラさせます)。ユーザーは、「カート」に追加するツイートを確認します。サービスの配列 (カート サービス内の「shoppingCart」) で選択された Ipush ツイート。

次に、[カートに追加] をクリックして、ユーザーが選択したものを表示する新しいページ (results.html) に移動します。

注: ここでは目的のために、これをスキップして結果をハードコーディングしました。

ここですべてが崩壊します。配列をコンソール印刷して、次のコントローラーがサービスを受信して​​いることを確認できますが、ng-repeat を機能させることができません。

ここで何を台無しにしたのか、まったくわかりません。私はまだAngularに非常に慣れていないので、ばかげた間違いを犯した可能性があります。ドキュメントを読んで、egghead.io ビデオをチェックアウトしました。残念ながら、2 つと 2 つを組み合わせることができません。

配列がハードコーディングされたサービスは次のとおりです。

myApp.service('cart', function Cart($rootScope) {
var self = this;
var shoppingCart = [{
    "created_at": "Wed, 17 Apr 2013 17:52:42 +0000",
    "from_user": "LopezCarlosB",
    "from_user_id": 244705286,
    "from_user_id_str": "244705286",
    "from_user_name": "carlos lopez",
    "geo": null,
    "id": 324581196224938000,
    "id_str": "324581196224937984",
    "iso_language_code": "en",
    "metadata": {
        "result_type": "recent"
    },

    "source": "",
    "text": "@Medicencaballo @ponnyloca AHHH AHH LESLEEEEEY ASD SIGYGIS",
    "to_user": "Medicencaballo",
    "to_user_id": 202598647,
    "to_user_id_str": "202598647",
    "to_user_name": "Axel Manrique",
    "in_reply_to_status_id": 324580938027765760,
    "in_reply_to_status_id_str": "324580938027765760"
}, {
    "created_at": "Wed, 17 Apr 2013 17:52:35 +0000",
    "from_user": "WhatNowTweeting",
    "from_user_id": 383266399,
    "from_user_id_str": "383266399",
    "from_user_name": "Herman",
    "geo": null,
    "id": 324581166764130300,
    "id_str": "324581166764130305",
    "iso_language_code": "en",
    "metadata": {
        "result_type": "recent"
    },

    "source": "",
    "text": "Life on the spectrum: 5 books about autism and Asperger's - Mother Nature Network #autism #asperger #pddnos #pdd #asd"
}, {
    "created_at": "Wed, 17 Apr 2013 17:52:32 +0000",
    "from_user": "Elchinitooooo",
    "from_user_id": 903231720,
    "from_user_id_str": "903231720",
    "from_user_name": "ChinoCochino..^^",
    "geo": null,
    "id": 324581154667782140,
    "id_str": "324581154667782147",
    "iso_language_code": "es",
    "metadata": {
        "result_type": "recent"
    },

    "source": "",
    "text": "Mañana viene mi amor :3 asd asd"
}];


self.add = function (item) {
    shoppingCart.push(item);

}

self.count = function () {
    console.log(shoppingCart);
    return shoppingCart.length;
}

self.log = function () {
    return shoppingCart;
}
});

以下は、ビューのコントローラーです。

myApp.controller('ResultsCtrl',

function ResultsCtrl($scope, $resource, cart) {

$scope.cart = cart;
$scope.shoppingCart = cart.shoppingCart;

});

そのビューの html は次のとおりです。

<div>
<table>{{cart.log()}}
    <br>
    <ul>
        <li ng-repeat="item in shoppingCart">{{item.text}}</li>
    </ul>
</table>
</div>

Firebug でエラーが発生していないため、配列を正しく参照していないと想像していますが、その方法を理解できていません。

何卒よろしくお願い申し上げます。

4

1 に答える 1

1

次の行を使用して、コントローラーから直接 shoppingCart 変数にアクセスしようとしているようです

$scope.shoppingCart = cart.shoppingCart;

ただし、shoppingCart は self/this にアタッチされておらず、実質的に非公開になっているため、そのタイプのアクセスは可能ではないと思います。サービスの log メソッドは shoppingCart 変数を返すため、上記の行を次のように変更すると役立つ場合があります。

$scope.shoppingCart = cart.log();

それがメソッドを使用して機能するかどうかは正確にはわかりません.service。そのため、失敗した場合は.factory代わりに使用することを検討する.serviceことをお勧めしますthis。

于 2013-04-17T19:54:49.480 に答える