动态生成 html DOM 元素答案

【问题标题】：generate html DOM elements dynamically动态生成 html DOM 元素
【发布时间】：2015-08-24 11:35:44
【问题描述】：

这里我试图通过玉模板上的角度控制器检索存储在 mongodb 中的数据

html
head
    script(src='/public/libs/angular.js')
    script(src='/public/libs/angular-route.js')
    script(src='/public/javascripts/processJson.js')   
body
      div(ng-app='app')
        div(ng-controller='MainController as main')
            div(ng-repeat='post in main.posts')     
                        {{post.type}}(id='{{post.id}}')
                        block content

----这是我的 mongodb 控制台----

[{"_id":"55dafdc56358955b3cf8a49e","id":"1","type":"div"}]

-----生成的html----

  <html>
  <head>
  <script src="/public/libs/angular.js"></script>
  <script src="/public/libs/angular-route.js"></script>
  <script src="/public/javascripts/processJson.js">  </script>
   </head> 
<body>
<div ng-app="app" class="ng-scope">
<div ng-controller="MainController as main" class="ng-scope">
<div ng-repeat="post in main.posts" class="ng-binding ng-scope">    
  div(id='1')
 </div>
</div>
</body>
</html>

问题是它没有按预期生成 div 元素

【问题讨论】：

公平合理的论点将在这里 “为什么要使用服务器端模板？” 当然，您可以简单地从服务器端点获取数据并将其绑定到角度只是“ng-repeat”任何需要的东西。这通常是框架的重点。
@BlakesSeven 虽然我无法为 OP 回答这个问题，而且我也不是在这里提倡需要，但服务器端模板通常用于优化 SEO。
问题是{{post.type}} 只会打印出字符串“div”而不是创建实际元素。为此，OP 需要一个指令和一些 DOM 方法
我在 Jade 方面没有大量经验，但您希望 {{post.type}}(id='{{post.id}}') 执行服务器端吗？
@MichaelPerrenoud 是的，这正是我想要的！

标签： html angularjs pug

【解决方案1】：

我正在尝试通过 jade 模板上的 angular 控制器检索存储在 mongodb 中的数据

您遇到的问题是您无法通过 Angular 直接访问 mongodb。 MongoDB 在服务器上运行，而 Angular 在客户端上运行。除非您专门创建某些路由或机制，否则仅使用 Jade 是无法将两者连接起来的。

Jade 的目的是从 .jade 文件创建一个 HTML 文件，这是在服务器本身上完成的。您在 Jade 语法 (#{…}) 中使用的任何变量都不适用于 Angular。在此过程中，Angular 不会发挥作用。所有 Angular 语法 ({{…}}) 和指令 (ng-repeat) 在生成所述 HTML 文件并加载到客户端浏览器后运行。

从您的代码看来，main.posts 似乎只能由 Jade 访问，而不能由 Angular 访问。要使ng-repeat='post in main.posts' 工作，main 应该可用于 Angular，即客户端 Javascript。你可以找到很多方法来做到这一点。像 this 或 this，或者您可以考虑创建 RESTful API，通过 Express 路由提供数据，并且客户端可以通过 XHR 访问。

【讨论】：