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

时间:2016-12-16 12:42:45

标签: javascript angularjs pug template-engine

所以,我在Angular指令中有一个嵌套对象:

    self.sqrx = 0
    self.sqry = 0
    self.x = 0
    self.y = 0

我想将它传递给Pug mixin: { "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":"" } } }

在mixin内部,此对象仅显示为对象:

+item-baseblock-preview('{{data.page_block_items[0]}}')

如果我只想显示像mixin item-baseblock-preview(item) ... ... #{item} 这样的对象的一个​​字段,Pug什么都不显示。如何解决?

1 个答案:

答案 0 :(得分:0)

您可以在编译过程中运行的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/