How to pass Angular object to pug mixin?

Question

So, I have a nested object in Angular directive:

{
   "preview_type":"default",
   "position":0,
   "material": {
       "id":1,
       "name":"Fashion's Night Out",
       "code":"fashion-s-night-out",
       "is_adult_content":false,
       "is_private_content":false,
       "tags":[{
           "id":4,
           "name":"Vogue",
           "code":"vogue"
       },{
           "id":1,
           "name":"Tokio",
           "code":"tokio"
       }],
       "authors": [{
           "name":"Bill",
           "code":"bill"
       }],
       "image": { 
           "id":13,
           "preview_url":""
       }
    }
 }

I want to pass it to Pug mixin: +item-baseblock-preview('{{data.page_block_items[0]}}')

Inside of mixin this object displays only as object:

mixin item-baseblock-preview(item)
    ...
    ...
    #{item}

If I'm trying to display only one field of object like #{item.position} Pug displays nothing. How to fix it?

Answer 1

You can include actual JavaScript in pug that is run during the compile process; so absolutely anything is possible.

Take a look at this working example...

//- This is a pug mixin that produces an Angular Material list with checkboxes...
mixin list(repeat, title, event)
  md-list(layout='column', layout-align='start stretch', flex='100', style='overflow: scroll')
    md-list-item(ng-repeat="item in " + repeat, ng-click="event('debug', '{{item." + event + "}}')")
      p
        b= "{{item." + title + "}}"
      md-checkbox.md-secondary(ng-model='topping.wanted')

//- This generates two mixin-injected material design lists...

//- This one uses events.title to display, and sends events.content as an event...
+list('events', 'title', 'content')

//- This one uses events.content to display, and sends events.title as an event...
+list('events', 'content', 'title')

If you're having hangups about understanding how javascript injection works in pug, just keep in mind anything past the = sign is treated like javascript and has the locals as variables. Check out this article that does a great job at describing this and tons more... https://webapplog.com/jade/