Ng-repeat not rendering content

Dan Prince

I'm writing a web app using Node.js+Express to serve (with HoganJs as a templating engine) and AngularJS on the frontend. I'm having problems with ng-repeat rendering the correct number of elements, but without any content in. I broke the ng-repeat down into a smaller example and it's still not rendering.

EDIT: There was a typo in the Plunkr, so I removed it. Here's a more expanded extract from my app.

Here's a section of my view: 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>

The results controller: 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);
    };
};

And finally my module: 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);

For testing purposes, the tracks are hardcoded in when the app is run 5 lis are rendered but there no content has been templated inside of them.

Dan Prince

I've just realised what's happening here. Hogan.js is overwriting angular's templates when the page is rendered at the server.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

ng-repeat with a newline on every third repeat

분류에서Dev

ng-table not rendering rows

분류에서Dev

Running total based on ng:repeat

분류에서Dev

AngularJS ng-repeat in this model

분류에서Dev

angular ng-repeat with condition

분류에서Dev

ng-repeat not being initialized

분류에서Dev

angular filter for the ng-repeat

분류에서Dev

ng-repeat of a directive and $validators

분류에서Dev

AngularJS IF ELSE with ng-repeat

분류에서Dev

AngularJS ng-repeat in modal

분류에서Dev

ng-repeat를 사용하여 내부 html / dom / content 만 반복하는 방법은 무엇입니까?

분류에서Dev

input tag inside ng-repeat angularjs

분류에서Dev

Angularjs Nested ng-repeat with conditional caluse

분류에서Dev

anjularjs push value to nested ng-repeat

분류에서Dev

angular.js ng-repeat with arrays

분류에서Dev

Angularjs ng-repeat 새 요소

분류에서Dev

AngularJs ng-repeat in group class

분류에서Dev

AngularJs ng-repeat by track by not updated

분류에서Dev

AngularJs. ng-repeat 문제

분류에서Dev

Angular ng-repeat with routeParams and nested array

분류에서Dev

Ng repeat error on form validating angularjs dupes

분류에서Dev

Show ng-repeat selectively in AngularJs

분류에서Dev

How to build 2 columns with a ng-repeat

분류에서Dev

ng-repeat is not working for the json value

분류에서Dev

ANgularjs: ng-repeat and nested custom directive

분류에서Dev

Nested JSON in one ng-repeat

분류에서Dev

angular directive ng-repeat scope and Service

분류에서Dev

Unable to load data using ng-repeat

분류에서Dev

AngularJS - check for null item in ng-repeat