1

I'm having some issues getting my new Angular project off the ground. I'm going to break off pieces into services and such later on, but for now I just have a controller called DashCtrl in a module called sandpiper.

I want to make a list of div.card elements from the $scope.results array within DashCtrl, additional items append to $scope.results when add-button is clicked, and also to append its $scope.test to the header. What happens, after clicking the button a few times, is this: (Screenshot link because I'm new and don't have reputation points T_T)

$scope.pushit() works and ng-repeat winds up spitting out the proper number of items, but the titles are absent. $scope.test isn't getting read either. I've banged my head against the wall for a couple of hours now and even coded up a little bare-bones Angular test to make sure I wasn't out of my gourd... but I just cannot figure this one out.

Here's my JS (two scripts, minified into /build/sandpiper.min.js later)

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"
        })
    }
}])

And here's my HTML (unrelated portions are omitted)

<!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>

Any help would be greatly appreciated; thanks in advance. Hope it's not something really stupid...

(Also this is my first post here, so if I'm doing anything wrong let me know)

Alex Arendsen
  • 21
  • 3
  • 1
    Have you ruled out a CSS issue? your Angular code looks good to me – sjm Jul 09 '15 at 04:36
  • Your code is working for me when I copy/paste. Is there anyway to post a codepen or plunkr to duplicate the issue? – whatoncewaslost Jul 09 '15 at 04:37
  • In your jsFiddle link if you replace `
      ` block with div starting with `
      ` then everything seems to be rendered correctly, so my first suspect is CSS as well. Can you open developer tools on a browser and verify that the title is actually not there?
     – dotnetom Jul 09 '15 at 04:38
  • Thanks for the advice everyone-- I figured out the issue in the answer below, it was [Twig](http://twig.sensiolabs.org/). – Alex Arendsen Jul 09 '15 at 12:48

1 Answers1

1

Well... the issue was obvious enough. I singled out my CSS includes (I'm using Materialize) and determined that that wasn't the issue-- it was actually that I was using Twig, a PHP template engine that also uses mustache notation for variables. My bindings were being stripped right out by the backend before they even reached the browser. Cannot believe I didn't realize that.

For anyone else who's having this issue, try using a different Angular delimiter or using a different tag_variable pattern for Twig.

Community
  • 1
  • 1
Alex Arendsen
  • 21
  • 3