generate html DOM elements dynamically

Question

Here I'm attempting to retrieve data stored in the mongodb via an angular controller on a jade template

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

----here 's my mongodb console----

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

-----generated 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>

The issue is it does not genearate the div element as expected

The fair and reasonable argument would be here *"Why use server side templating at all?"* as surely you could simply just get the data from a server endpoint and bind that in angular to just "ng-repeat" anything that was required. That generally is the focus of the framework. — Blakes Seven, Aug 24 '15 at 11:39
@BlakesSeven while I cannot answer that question for the OP, and I'm not advocating the need here either, server-side templates are often used to optimize SEO. — Mike Perrenoud, Aug 24 '15 at 12:07
The issue is that `{{post.type}}` is only ever going to print out the string "div" and not create an actual element. For that, OP will need a directive and some DOM methods — Phil, Aug 24 '15 at 12:09
I don't have a ton of experience with Jade, but are you expecting `{{post.type}}(id='{{post.id}}')` to execute server-side? — Mike Perrenoud, Aug 24 '15 at 12:10
@MichaelPerrenoud There are actually far more "modern" techniques for doing so, such as basically directing all "crawler" requests to a proxy agent that is JavaScript and therefore "framework" savvy to render the content for the request. But this does generally stray off topic for the question asked. The concern is the "data binding" by doing some of the work on the server and "some" on the client. — Blakes Seven, Aug 24 '15 at 12:30

score 1 · Answer 1 · edited May 23 '17 at 12:30

I'm attempting to retrieve data stored in the mongodb via an angular controller on a jade template

The problem you're having is that you can't directly access mongodb via angular. MongoDB runs on server whereas Angular runs on client. Unless you specifically create certain routes or mechanisms, you can't make the two connect by just using Jade.

Jade's purpose is to create an HTML file from the .jade files, which is done on the server itself. Any variables that you use in a Jade syntax (#{…}) are not available to Angular. Angular does not come into play during this process. All the Angular syntax ({{…}}) and directives (ng-repeat) are run after the said HTML file has been generated and is loaded on the client-side browser.

From your code it seems main.posts is only accessible to Jade, not Angular. For ng-repeat='post in main.posts' to work, main should be available to Angular i.e. to client-side Javascript. You can find many ways to do that. Like this or this, or you may look into creating RESTful APIs that serve the data via Express routes and can be accessed by client via XHR.

generate html DOM elements dynamically

1 Answers1