TypeError: Cannot read property 'columns' of undefined

[jvgeee]

I'm getting this error when trying to use this grid with ExpressJS/Jade. Occurs at line 182:
var column = (index % self.$$scope.layout.columns) | 0;

HTML setup for Jade:

 div(deckgrid, source="posts", cardTemplate="templates/grid-template.html", class="deckgrid")

Gets rendered as:

 <div deckgrid="deckgrid" source="posts" cardtemplate="templates/grid-template.html" class="deckgrid ng-isolate-scope ng-scope">
      <!-- ngRepeat: column in columns -->
 </div>

As you can see there's nothing being output in the columns. I've tried setting the template to a full URL and doesn't work. Perhaps it's an issue with my data structure? Here's one object within the $scope.posts array

 {
    _id: "528dbf28957ba0311a002208"
    backupLink: "http://www.urbanoutfitters.com/urban/catalog/productdetail.jsp?id=28502466"
    category: Array[3]
    currency: "USD"
    date: "2013-11-21T07:23:38.413Z"
    dateUpdated: "2013-11-21T22:30:47.168Z"
    description: ""
    designer: "Urban Outfitters"
    gender: "unisex"
    imageurl: "http://images.urbanoutfitters.com/is/image/UrbanOutfitters/28502466_000_b?$detailmain$"
    imgs: Array[4]
    impressionURL: "http://www.awltovhc.com/image-7227532-11292048"
    infoLink: "http://www.kqzyfj.com/click-7227532-11292048?url=http%3A%2F%2Fwww.urbanoutfitters.        om%2Furban%2Fcatalog%2Fproductdetail.jsp%3Fid%3D28502466"
    liked: "http://i.imgur.com/tEf77In.png"
    likes: Array[0]
    name: "My Bloody Valentine - MBV LP+CD"
    nameTags: Array[10]
    price: "46.98"
    ships_to: "worldwide"
    store: "Urban Outfitters"
    systemName: "urban_outfitters_my_bloody_valentine_-_mbv_lp+cd"
 }

There's about 30 of them in $scope.posts and they print just fine when I put them in a {{posts}} within my template.

Any ideas on a remedy?

[kewball]

What's in templates/grid-template.html?

[jvgeee]

Currently:

    <div class="a-card">
    <h1>{{card.name}}</h1>

    <img src="" data-ng-src="{{card.imgs[0]}}">
</div>

Essentially what was in the docs.

[jvgeee]

Interestingly if I change the template path to some gibberish, e.g. cardtemplate="asdfasdfas" there is no change, perhaps it's not reading the template file properly?

[kewball]

I have the docs example working. When I comment out the .css rules
.deckgrid::before
.deckgrid .column
.deckgrid .column-1-4
...I get the results you describe - it stops rendering at ng-repeat column in columns. The source code makes my brain hurt so I can be of little further help. :)

[jvgeee]

Interesting. I added that CSS in and I don't get the error anymore. I'm still getting nothing displayed in the template though (it doesn't appear to be reading nor reaching my template, so nothing is displayed at all). Regardless of whether I put gibberish in the cardtemplate=''field or an actual direct path to the URL.

[kewball]

The browser inspector/console should be displaying a 404 error when the template path is wrong or missing. Took me three tries to find a suitable location for my template file.

[jvgeee]

Mine definitely is not (osx chrome). Tried both minified/regular modules,
neither work. Don't even know where to begin troubleshooting this!
On 22/11/2013 4:10 PM, "kewball" [email protected] wrote:

The browser inspector/console should be displaying a 404 error when the
template path is wrong or missing. Took me three tries to find a suitable
location for my template file.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/1#issuecomment-29049377
.

[akoenig]

The described error pops up when the CSS is not configured properly. I added a log message in the new v0.1.1 which is available now. Thanks for heads up.

Are you sure that your template file is available in a static way? Note that the template has to be placed in a directory where it is available via a simple HTTP GET request (like templates for your AngularJS controllers, AngularJS directives, images, stylesheets, etc.). Do you use "precompiled" AngularJS templates which will be generated by your ExpressJS application?

[jvgeee]

I've modified my server so the template is available via a HTTP GET. It renders exactly the same as my main page templates, yet still am getting nothing displayed when I try to load it.

I've tried changing the template path to other known-good templates but to no avail.

I can see in my server log that it is performing a GET on partials/grid-template but it appears that no data is being loaded from the template to the view. Here's the current setup:

HTML (here's how it's being rendered too, as you can see it's correctly loading in the amount of cards (there are actually more columns rendered but I edited them out for brevity):

  <div deckgrid="deckgrid" source="posts" cardtemplate="http://localhost:5000/partials/grid-template" class="deckgrid ng-isolate-scope ng-scope">
        <!-- ngRepeat: column in columns -->
        <div data-ng-repeat="column in columns" class="column column-1-4">
        <!-- ngRepeat: card in column -->
            <div data-ng-repeat="card in column" data-ng-include="cardTemplate" class="ng-scope"></div>
            <div data-ng-repeat="card in column" data-ng-include="cardTemplate" class="ng-scope"></div>
            <div data-ng-repeat="card in column" data-ng-include="cardTemplate" class="ng-scope"></div>
            <div data-ng-repeat="card in column" data-ng-include="cardTemplate" class="ng-scope"></div>
        </div>
    </div>        

Template:

 <p>HELLO</p>
 {{card}}
 {{posts}}
 <div class="a-card">
      {{card.name}}
      <img ng-src="{{card.imgs[0]}}">
 </div>

Tried heaps of things within the templates, tried lots of different templates, nothing is getting rendered inside the cards at all. All are being successfully GOT from my server according to the logs, just appears like angular-deckgrid isn't using the template properly. Any ideas?

[akoenig]

Can you try to include the card template via "ngInclude" in a random place of your app?

Something like

ngInclude="'http://localhost:5000/partials/grid-template'"

[jvgeee]

Using ngInclude like that didn't work, but this did:

 <div ng-include src="'/partials/grid-template'"></div>

Putting cardTemplate="'/partials/grid-template'" in my deckgrid div didn't work though, caused my app to crash in some sort of infinite loop. Doing it with just the double quotes didn't work either, just led to blank cards.

[jvgeee]

After a bit more troubleshooting, I've configured ExpressJS to serve up static HTML templates from my /templates/ folder. Works fine if I use ngInclude like this:

 <div ng-include src="'/templates/grid-template.html'"></div> (note, single quotes within double quotes. Double quotes alone yield a blank page)

If I try to do:

 <div deckgrid="deckgrid" source="posts" cardtemplate="/templates/grid-template.html" class="deckgrid></div>

I get no output whatsoever. If I put cardtemplate="'/templates/grid-template.html'" (single quotes within double quotes) I get your Missing CSS Selectors error 5 times then Angular goes nuts and starts trying to grab my .js files in an infinite loop. The CSS is definitely there, I've even tried added it inside a <style></style> tag within the template but to no avail.

Interesting that this error only happens when I put the template path in single-quote-within-double-quote. Also happens when I do it like this: "{templates/grid-template.html}", only trying these as several sources say they're necessary for ng-include which from looking in your code is what angular-deckgrid uses.

Source: http://stackoverflow.com/questions/13943471/angularjs-ng-include