【问题标题】:Ng-repeat not rendering contentNg-repeat 不呈现内容
【发布时间】:2013-09-10 08:53:05
【问题描述】:

我正在编写一个 Web 应用程序,使用 Node.js+Express 来服务(使用 HoganJs 作为模板引擎)和前端的 AngularJS。我在 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 lis 被渲染,但其中没有任何内容被模板化。

【问题讨论】:

  • 未找到 Plunk。你能检查你的链接吗?
  • @Scalpweb 抱歉,已更新。
  • 好的,现在哪里有笨蛋?

标签: javascript angularjs hogan.js


【解决方案1】:

在此处删除)

      ];
   });
    ^

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

【讨论】:

    【解决方案2】:

    我刚刚意识到这里发生了什么。当页面在服务器上呈现时,Hogan.js 会覆盖 Angular 的模板。

    【讨论】:

      【解决方案3】:

      只需删除添加到脚本中的额外括号(第 19 行)。请看这里的脚本。 http://plnkr.co/edit/sy2m0RuXRudGvjnmfC3Y?p=preview

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2018-04-11
        • 2016-03-03
        • 2014-03-14
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多