我的模板引擎正在搞乱Angular

时间:2016-07-07 15:29:06

标签: angularjs node.js

真的卡在这里,所以会很感激帮助。

让我先解释一下我的设置/堆栈:

  • 后端 - 带Express的节点
  • 前端 - Angular

代码的Node部分的片段:

var router = express.Router();

router.get('/main', function(req, res){
  res.render('wall', {siteTitle:'Home'});
});

HTML页面中的代码段:

<p>{{ siteTitle }}</p>

<div ng-controller="wallPosts">
  <div ng-repeat="post in posts">
    <p>{{ post.title }}</p>
  </div>
<div>

Angular控制器的片段:

var angularApp = angular.module('angularApp', []);

angularApp.controller('wallPosts', ['$scope', '$http', function($scope, $http){

$http.get('/api/posts')
    .success(function(result){
        $scope.posts = result;
        console.log(result);
    })
    .error(function(data, status){
        console.log(data);
    });
}]);

好的,这就是问题 - HTML页面中的{{post.title}}位没有得到更新。但是,这是:{{siteTitle}}

区别 - post.title来自Angular app,而siteTitle来自Node的res.render。

此外,Angular控制器中的console.log可以正常工作,因为我想排除连接问题。此外,我已经排除了'/ api / posts'API调用,因为它确实传递了一个对象数组。

我已将节点配置为使用'hogan-express',如下所示:

来自Node的

Snippet:

app.engine('html', require('hogan-express'));

所以 - 有人可以帮助我吗?我究竟做错了什么?我希望我的Node能够进行路由并充当API服务器,而Angular只是为了从API中获取数据并将它们放到HTML页面中。

提前致谢, 砂眼

2 个答案:

答案 0 :(得分:1)

问题是AngularJS和NodeJS模板引擎的模板标记是相同的。

  1. 一个修复方法是将AngularJS模板标记更改为某些内容 以外 {{。你可以通过配置来完成。
  2. 或者将NodeJS模板引擎的模板标签更改为 除了{{
  3. 或者,为了快速解决问题,您可以将以下代码移至单独的html 并使用ng-include包含它。

    panzoom.zoomAtPoint(2, {x: 3000, y: -2500});
    

答案 1 :(得分:1)

使用类似{[]}的内容作为服务器端模板语法或客户端(Angular)模板语法。不管你设置哪一个都不重要。如果选择客户端,请在$interpolateProvider中注入Angular配置中进行设置。有关详细信息,请参阅Angular docs

另外我认为这是possible dup ...