如何将Angular对象传递给pug mixin？

Question

因此，我在Angular指令中有一个嵌套对象：

{
   "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":""
       }
    }
 }

我想将其传递给Pug mixin： +item-baseblock-preview('{{data.page_block_items[0]}}')

在mixin内部，此对象仅显示为对象：

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

如果我仅尝试显示#{item.position}类的对象的一个​​字段，则Pug不显示任何内容。 如何解决？

Answer 1

您可以在编译过程中运行的pug中包含实际的JavaScript。 所以绝对有可能。

看一下这个工作示例...

//- 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')

如果您对了解哈巴狗中javascript注入的工作方式感到困惑，只需记住=符号以外的任何内容都将像javascript一样对待，并将本地变量作为变量。 看看这篇文章，它在描述这一方面做得很好，并且还有更多... https://webapplog.com/jade/