Question

这里我试图通过玉石模板上的角度控制器检索存储在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元素

Answer 1

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

您遇到的问题是您无法通过角度直接访问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类似，或者您可以考虑创建通过Express路由提供数据的RESTful API，客户可以通过XHR进行访问。

动态生成html DOM元素

1 个答案: