【问题标题】:Accessing Get variable in Angular function在 Angular 函数中访问 Get 变量
【发布时间】:2013-02-21 18:28:13
【问题描述】:

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

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

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

h1 #{user}

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

【问题讨论】:

    标签: javascript node.js express angularjs


    【解决方案1】:

    我写了一篇关于这个主题的博文 - How to pass JavaScript Variables from a server to Angular

    总的来说,您有三个选择:

    1. 使用内嵌 JavaScript 标记(不推荐)
    2. 发出 HTTP 请求(如您在自己的解决方案中所示)
    3. 使用ngInit

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

    要将 user 对象从 express 服务器传递到 Angular 控制器,请使用 ngInit 指令:

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

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

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

    【讨论】:

    • 恭喜并感谢您提供了一个非常好的和干净的解决方案。正在寻找一种将数据从 Express 会话传递到 Angular 应用程序的方法。
    • 如果您使用的是 hogan.js,这对于将变量传递到视图中很有用 github.com/twitter/hogan.js/issues/240
    • 链接现在失效了,这个方法对我不起作用。 #{ 符号是什么?
    • Zemirco 的链接在这里仍然有效 - mircozeiss.com/…
    【解决方案2】:

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

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

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

    【讨论】:

    • 我花了一些时间试图实现这个,但这个答案真的不够完整。你的“预加载”是什么?
    【解决方案3】:

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

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

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

    【讨论】:

      【解决方案4】:

      感谢 James,FoodMe 演示看起来是一个很好的学习资源。阅读您的回复后,它改变了我的想法,足以让我想出自己的解决方案。我将其添加为替代答案,仅仅是因为 cmets 中的代码很烂。为了提高我对 node 和 angular 如何协同工作的理解,也许您或其他人可能会很乐意评论我们的两种解决方案如何比较,以及为什么或何时更可取。

      在我的快递 app.js...

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

      在我的路由/api.js...

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

      然后在我的角度控制器中...

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

      【讨论】:

        【解决方案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) )
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2023-04-03
          • 1970-01-01
          • 2018-06-08
          • 1970-01-01
          • 2021-11-17
          • 1970-01-01
          • 2017-11-19
          相关资源
          最近更新 更多