2

Node.js+Express を使用してサービスを提供し (テンプレート エンジンとして HoganJs を使用)、フロントエンドに AngularJS を使用して Web アプリを作成しています。正しい数の要素をレンダリングする ng-repeat に問題がありますが、コンテンツがありません。ng-repeat を小さな例に分割しましたが、まだレンダリングされていません。

編集：Plunkrにタイプミスがあったので、削除しました。これは私のアプリからのより拡張された抜粋です。

これが私の見解の一部です：index.hjs

<div class="search-results" ng-controller="results">
    <ul class="tracks">
        <li class="track" ng-repeat="track in tracks">
                <ul class="meta">
                    <li>
                        <div class="name">
                            <span class="value">{{track.name}}</span>
                        </div>  
                    </li>
                    <li>
                        <div class="album">Album: 
                            <span class="value">{{track.album}}</span>
                        </div>  
                    </li>
                    <li>
                        <div class="artist">Artist:  
                            <span class="value">{{track.artist}}</span>
                        </div>  
                    </li>
                    <li>
                        <div class="length">Length:  
                            <span class="value">{{track.length}}</span>
                        </div>  
                    </li>
                </ul>   
            </li>
        </ul>
    </div>

結果コントローラー:js/controllers/results.js

var results = function($scope, socket) {
    $scope.tracks = [
        {"uri":"spotify:track:1jdNcAD8Ir58RlsdGjJJdx","name":"Ho Hey","artist":"The Lumineers","album":"The Lumineers"},
        {"uri":"spotify:track:3uuGbRzMsDI5RiKWKOjqWL","name":"Hey Porsche","artist":"Nelly","album":"Hey Porsche"},
        {"uri":"spotify:track:5BSndweF91KDqyxANsZcQH","name":"Ho Hey","artist":"The Lumineers","album":"The Lumineers"},
        {"uri":"spotify:track:2UNc0duOP4cS7gqYFFkwxT","name":"Hey Girl","artist":"Billy Currington","album":"Hey Girl"},
        {"uri":"spotify:track:6fgbQt13JlpN59PytgTMsA","name":"Snow [Hey Oh]","artist":"Red Hot Chili Peppers","album":"Snow [Hey Oh]"}
    ];

    socket.on("results", function(tracks) {
        $scope.tracks = tracks;
        console.dir(JSON.stringify($scope.tracks));
    });

    $scope.add = function(uri) {
        socket.emit("add", uri);
    };
};

そして最後に私のモジュール:app.js

var app = angular.module("app", []);

var factories = {
    socket: socket
};
app.factory(factories);

var controllers = {
    actions: actions,
    search: search,
    results: results,
    queue: queue
};
app.controller(controllers);

テスト目的で、アプリの実行時にトラックがハードコーディングされ、5 つliの s がレンダリングされますが、トラック内にテンプレート化されたコンテンツはありません。

4

3 に答える 3

1

ここで何が起こっているのか、私はたった今理解しました。Hogan.js は、ページがサーバーでレンダリングされるときに angular のテンプレートを上書きしています。

于 2013-09-10T09:13:33.353 に答える
1

ここを削除し)ます：

      ];
   });
    ^

Plnkr: http://plnkr.co/edit/e0URFt?p=preview

于 2013-09-10T08:59:13.310 に答える
0

スクリプトに追加された余分な括弧 (19 行目) を削除するだけです。ここでスクリプトを見てください。 http://plnkr.co/edit/sy2m0RuXRudGvjnmfC3Y?p=preview

于 2013-09-10T08:59:17.820 に答える