Angular ng-repeat работает, но значения не привязаны/не отображаются (Twig)

У меня возникли проблемы с запуском моего нового проекта Angular. Позже я собираюсь разделить его на службы и тому подобное, но пока у меня есть только контроллер с именем DashCtrl в модуле с именем sandpiper.

Я хочу составить список элементов div.card из массива $scope.results в пределах DashCtrl, дополнительные элементы добавляются к $scope.results при нажатии add-button, а также добавляют его $scope.test к заголовку. После нажатия кнопки несколько раз происходит следующее: (Ссылка на скриншот, потому что я новичок и не т есть очки репутации T_T)

$scope.pushit() работает, а 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>

Любая помощь будет принята с благодарностью; заранее спасибо. Надеюсь, это не что-то действительно глупое...

(Кроме того, это мой первый пост здесь, так что если я делаю что-то не так, дайте мне знать)


javascript angularjs twig materialize
person Alex Arendsen    schedule 09.07.2015    source источник
comment
Вы исключили проблему с CSS? ваш код Angular выглядит хорошо для меня   -  person sjm    schedule 09.07.2015
comment
Ваш код работает для меня, когда я копирую/вставляю. Есть ли способ опубликовать codepen или plunkr, чтобы дублировать проблему?   -  person whatoncewaslost    schedule 09.07.2015
comment
В вашей ссылке jsFiddle, если вы замените блок <ul ...> на div, начинающийся с <div class="row" id="results-container">, тогда все будет отображаться правильно, поэтому мой первый подозреваемый также связан с CSS. Можете ли вы открыть инструменты разработчика в браузере и убедиться, что названия на самом деле нет?   -  person dotnetom    schedule 09.07.2015
comment
Спасибо всем за советы - я понял проблему в ответе ниже, это был Twig.   -  person Alex Arendsen    schedule 09.07.2015

Ответы (1)


arrow_upward
1
arrow_downward

Что ж... проблема была достаточно очевидной. Я выделил свои включения CSS (я использую Materialize) и решил, что это не проблема — на самом деле я использовал Twig, механизм шаблонов PHP, который также использует нотацию усов для переменных. Мои привязки удалялись серверной частью еще до того, как они достигли браузера. Не могу поверить, что я этого не понимал.

Всем, у кого возникла эта проблема, попробуйте использовать другой разделитель Angular или с использованием другого tag_variable шаблона для Twig.

person Alex Arendsen    schedule 09.07.2015