2015-08-24 4 views
1

Здесь я пытаюсь получить данные, хранящиеся в MongoDB через угловой регулятор на шаблоне нефритагенерировать HTML-элементы DOM динамически

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> 

Этот вопрос не genearate элемент Div, как ожидается,

+0

Яркий и разумный аргумент будет здесь * «Зачем использовать серверные шаблоны вообще?» *, Так как вы могли просто просто получить данные с конечной точки сервера и связать это с угловым, чтобы просто «ng-repeat» все, что потребовалось. Это в целом является фокусом структуры. –

+0

@BlakesSeven, пока я не могу ответить на этот вопрос для OP, и я не сторонник необходимости здесь, серверные шаблоны часто используются для оптимизации SEO. –

+0

Проблема в том, что '{{post.type}}' только собирается распечатать строку «div», а не создать фактический элемент. Для этого OP потребуется директива и некоторые методы DOM – Phil

ответ

1

Я пытаюсь получить данные, хранящиеся в MongoDB через угловой контроллер на нефритом шаблону

Проблема у Вас есть то, что вы не можете напрямую доступ mongodb через угловой. MongoDB работает на сервере, тогда как Angular работает на клиенте. Если вы специально не не создаете определенные маршруты или механизмы, вы не можете сделать их двумя, просто используя Jade.

Целью Jade является создание файла HTML из файлов .jade, который выполняется на самом сервере. Любые переменные, которые вы используете в синтаксисе Jade (#{…}), недоступны для Angular. Угловой не вступает в игру во время этого процесса. Все синтаксис Angular ({{…}}) и директивы (ng-repeat) запускаются после того, как указанный HTML-файл был сгенерирован и загружен в клиентском браузере.

С вашего кода кажется main.posts доступен только для Jade, а не для углового. Для ng-repeat='post in main.posts' для работы, main должен быть доступен для Angular i.e на стороне клиента Javascript. Вы можете найти много способов сделать это. Например, this или this, или вы можете изучить создание API RESTful, которые обслуживают данные через Express-маршруты, и к ним можно получить доступ через XHR.