Angular ng-repeat 有效......但没有绑定/显示任何值（Twig）答案

【问题标题】：Angular ng-repeat works... but no values are bound / displayed (Twig)Angular ng-repeat 有效......但没有绑定/显示任何值（Twig）
【发布时间】：2015-07-09 04:30:19
【问题描述】：

我在启动新的 Angular 项目时遇到了一些问题。稍后我将分解为服务等，但现在我在一个名为 sandpiper 的模块中只有一个名为 DashCtrl 的控制器。

我想从DashCtrl 中的$scope.results 数组中创建一个div.card 元素列表，单击add-button 时附加项目附加到$scope.results，并将其$scope.test 附加到标题.点击几次按钮后会发生什么：(Screenshot link because I'm new and don't have reputation points T_T)

$scope.pushit() 有效，ng-repeat 最终会吐出正确数量的项目，但没有标题。 $scope.test 也没有被阅读。我已经把头撞在墙上几个小时了，甚至编码a little bare-bones Angular test 以确保我没有失去我的葫芦......但我就是想不通这个。

这是我的 JS（两个脚本，稍后缩小为 /build/sandpiper.min.js）

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

app.controller('DashCtrl',['$scope',function($scope){

    $scope.test = "Header"

    $scope.results = [
        {
            title: "Test Item 1",
            file: "12345978-My-Test-Document.pdf",
            type: "PDF",
            tags: ['pdf','test','foo','bar'],
            image: "static/img/pdf.png"
        }
    ]

    $scope.pushit = function(){
        $scope.results.push({
            title: "Test Item 1",
            file: "12345978-My-Test-Document.pdf",
            type: "PDF",
            tags: ['pdf','test','foo','bar'],
            image: "static/img/pdf.png"
        })
    }
}])

这是我的 HTML（不相关的部分被省略）

<!DOCTYPE html>
<html lang="en">
<head>

(...)

    <!-- bower:js -->
    <script src="../bower_components/jquery/dist/jquery.js"></script>
    <script src="../bower_components/materialize/bin/materialize.js"></script>
    <script src="../bower_components/angular/angular.js"></script>
    <!-- endbower -->

    <script src="/build/sandpiper.min.js"></script>
</head>
<body ng-app="sandpiper">
    <main>
        <div class="container" id="content-root">
            <div id="dash-wrapper" ng-controller="DashCtrl">
                <h3>Test {{ test }}</h3>
                <a ng-click="pushit()" class="btn-floating btn-large waves-effect waves-light" id="add-button">
                    <i class="material-icons">add</i>
                </a>
                <nav>
                    (...)
                </nav>

                <div class="row" id="results-container">
                    <div class="col s12 m4 l3" ng-repeat="item in results">
                        <div class="card">
                            <div class="card-content">
                                <span class="black-text">{{ item.title }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    (...)
</body>
</html>

任何帮助将不胜感激；提前致谢。希望这不是一件很愚蠢的事情......

（这也是我在这里的第一篇文章，所以如果我做错了什么，请告诉我）

【问题讨论】：

您是否排除了 CSS 问题？你的 Angular 代码对我来说看起来不错
当我复制/粘贴时，您的代码对我有用。有没有办法发布一个codepen或plunkr来复制这个问题？
在您的 jsFiddle 链接中，如果您将 <ul ...> 块替换为以 <div class="row" id="results-container"> 开头的 div，那么一切似乎都正确呈现，所以我的第一个嫌疑人也是 CSS。你能在浏览器上打开开发者工具并验证标题实际上不存在吗？
感谢大家的建议-我在下面的答案中发现了问题，它是Twig。

标签： javascript angularjs twig materialize

【解决方案1】：

嗯……问题已经很明显了。我选择了我的 CSS 包含（我正在使用 Materialize）并确定这不是问题——实际上我使用的是 Twig，这是一个 PHP 模板引擎，它也使用胡须符号表示变量。我的绑定在到达浏览器之前就被后端剥离了。不敢相信我没有意识到这一点。

对于遇到此问题的其他人，请尝试 using a different Angular delimiter 或 using a different tag_variable pattern for Twig。

【讨论】：