Question

我有一些问题让我的新Angular项目开始了。我打算将部分分解为服务等等，但是现在我只在一个名为DashCtrl的模块中有一个名为sandpiper的控制器。

我想在div.card中的$scope.results数组中列出DashCtrl个元素，在点击$scope.results时附加到add-button的其他项目，以及还要将其$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>

非常感谢任何帮助;提前致谢。希望它不是真正愚蠢的东西...

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

Answer 1

嗯......问题很明显。我挑选了我的CSS包括（我使用Materialise）并确定这不是问题 - 实际上我使用的是Twig，一个PHP模板引擎，它也对变量使用小胡子符号。我的绑定在它们甚至到达浏览器之前被后端剥离。无法相信我没有意识到这一点。

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

角度ng-repeat有效...但没有绑定/显示值（Twig）

1 个答案: