javascript - 在 Angular 函数中访问 Get 变量

Question

我正在用 node express 和 angular js 构建一个应用程序。我将一个变量传递给我的视图，如下所示......

app.get('/profile', ensureAuthenticated, function(req, res){
  res.render('profile', { user: req.user });
});

我可以像这样（玉）访问我视图中的变量......

h1 #{user}

但是如何从控制器或指令中的角度函数访问此变量？

Answer 1

我写了一篇关于这个主题的博客文章 -如何将 JavaScript 变量从服务器传递到 Angular。

总而言之，您有三个选择：

1. 使用内联 JavaScript 标签（不推荐）
2. 发出 HTTP 请求（如您在自己的解决方案中所示）
3. 使用ngInit

你可以在我的帖子中阅读详细信息，我只会展示最后一个，也是我认为最聪明的解决方案。

要将您的user对象从您的快速服务器传递到 Angular 控制器，请使用以下ngInit指令：

div(ng-controller="UserCtrl", ng-init="user= #{JSON.stringify(user)}")

这会将内容加载到 Angular 范围内，您应该能够通过调用在控制器内部访问它$scope.user。

function UserCtrl($scope) {
  console.log($scope.user);
}

Answer 2

ng-init不是在 Angular 中加载/存储常量的方法。介绍一下，Angular 方式：

<script>
  angular.module('$preloaded', []).constant('$preloaded', <%= preloaded %>)
</script>

然后，您可以在代码中的任何位置注入$preloaded依赖项并访问常量。

Answer 3

Thanks James, the FoodMe demo looks like a great learning resource. Having read your reply, it shifted my thinking enough for me to come up with my own solution. I will add it as an alternative answer, simply because code in comments suck. For the sake of improving my understanding of how node and angular can work together, perhaps you or somebody else might be kind enough to comment on how our two solutions compare, and why or when one might be preferable.

In my express app.js...

app.get('/api/user', api.user);

and in my routes/api.js...

exports.user = function (req, res) {
  res.json(req.user);
};

and then in my angular controller...

function profileCtrl($scope, $http) {

  $http.get('/api/user/').success(function(data) {
    $scope.user = data;
  });
}

Answer 4

在我看来，您可能正在以一种不理想的方式混合事物。我认为最好的方法是在 Angular 代码中使用$resource来调用 /profile 并以这种方式获取数据。

这样想，你刚刚使用 node 创建了一个 webservice，现在你使用 AngularJS 从你的 Services 层调用 webservice。调用它的代码非常简单，可以在我链接的文档中找到。

您可能还想查看FoodMe 演示，它使用 node.js 作为 web 服务层，使用 angularJS 作为客户端 UI 层，与您设置的方式完全相同。

Answer 5

这是一篇旧帖子，但很相关。Zemrico 的答案很好，但需要更新，因为jade/pug 语法有一些变化。首先，他的答案中的链接已损坏，应该是

http://www.mircozeiss.com/how-to-pass-javascript-variables-from-a-server-to-angular

如果您正在阅读博客文章，请注意以下内容不再适用，因为 pug 不再接受插值作为属性。

div(ng-controller="UserCtrl", ng-init="user= #{JSON.stringify(user)}")

相反，请使用它。

div(ng-controller="UserCtrl", ng-init="user=" + JSON.stringify(user) )