Angular ng-repeat works..但是没有值被绑定/显示(小枝)

Angular ng-repeat works... but no values are bound / displayed (Twig)

本文关键字：绑定 显示 小枝 works ng-repeat Angular      更新时间：2023-09-26

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

我想从DashCtrl中的$scope.results数组中创建div.card元素列表，当单击add-button时，附加项附加到$scope.results，并将其$scope.test附加到标题。点击按钮几次后发生的事情是这样的:(截图链接，因为我是新人，没有声望点T_T)

$scope.pushit() works和ng-repeat最终吐出了适当数量的项目，但没有标题。$scope.test也没有被读取。我已经绞尽脑汁好几个小时了，甚至编写了一个简单的Angular测试，以确保我没有发疯……但是我就是想不明白这个。

这是我的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包含(我使用的是Materialize)，并确定这不是问题所在——实际上是我使用了Twig，这是一个PHP模板引擎，也使用了小胡子符号来表示变量。我的绑定甚至在到达浏览器之前就被后端剥离了。真不敢相信我竟然没意识到。

对于其他有此问题的人，请尝试使用不同的Angular分隔符或为Twig使用不同的tag_variable模式。

相关文章：