AngularJS：在加载页面时从后端传递变量答案

【问题标题】：AngularJS: pass variable from backend while loading a pageAngularJS：在加载页面时从后端传递变量
【发布时间】：2014-07-24 21:35:43
【问题描述】：

这是我第一次尝试使用 Angular JS，并且停留在一个非常基本的步骤。我有一个 AngularJS 前端和 Grails 后端。以下是我的问题所遵循的代码 sn-ps。

作为

"/graph"(controller: 'Graph')

作为

class GraphController {
    def index() {
        render(view: "../graph", model: [employeeId: "197040"])
    }
}

当我给出 URL：hostname:port/graph 时，我可以看到正文显示为“Hi！Welcome”。但是，我想不出一种（简单的）方法来读取该employeeId并将其显示为“Hi！Welcome 197040”（即能够读取从后端发送的该变量employeeId）

<div><h3>Hi ! Welcome {{employeeId}}</h3></div> 没有按预期工作。

很抱歉，如果这是一个太基本的问题，但我无法在任何地方看到答案。

【问题讨论】：

【解决方案1】：

试试这个：

<div ng-init="employeeId=${employeeId}"><h3>Hi ! Welcome {{employeeId}}</h3></div>

这会将 GSP 上下文中的 employeeId 的值分配给 Angular 上下文中可用的变量。要理解我的意思，请查看浏览器中生成的 HTML 源代码。

通过这样做，employeeId 变量也将在您的 Angular 控制器范围内分配。

【讨论】：

谢谢詹姆斯。这正是我在我的代码中所做的（按照上面@vahid 的回答）。我将您的答案标记为“有用”，因为我已经接受了较早的答案。非常感谢那个教程链接。我希望我能“提高”你的答案更多:)

【解决方案2】：

您的 Angular 应用程序在用户的浏览器上运行，并且无法访问您的后端环境。因此，简单地将employeeId 设置为后端环境变量并不允许Angular 访问它。

我可以推荐两个解决这个问题的方法：

1) 在索引视图 (/graph) 中，将employeeId 呈现为脚本标记中的JavaScript 全局。在 Angular 中，将全局 employeeId 注册为 Angular 值。然后您可以将employeeId 值注入您的Angular 控制器并在Angular 视图中呈现它。

2) 在 Angular 应用程序启动之前通过 Ajax 异步检索employeeId，并将其注册为 Angular 值。然后你可以将它注入你的控制器。我最近写了一篇关于如何做到这一点的博客文章：http://biodegreeprogrammer.blogspot.ca/2014/07/pre-loading-data-asynchronously-in.html

【讨论】：

感谢您的选择。截至目前，我在 angularjs （另存为 gsp ）文件中使用 ${employeeId} 取得了一些进展。但它还不干净。你能给我你建议的两个选项的示例代码 sn-ps 吗？提前感谢您的帮助。

【解决方案3】：

这里的另一件事是，这毕竟是 gsp.. 并且您的 grails 变量将像您定义布局一样正常工作..

<div><h3>Hi ! Welcome ${employeeId}</h3></div>

这将是 grails 将这些信息推回......

也许您希望自己试用一下被捕插件作为演示，然后以上面的服务为例并根据自己的用途进行更改..

【讨论】：

我几乎想“接受”你提供的答案。不知道为什么我没有想到这个简单的事情。我按照您的建议进行，并提出了一些建议。但是，虽然 ${employeeId} 在某些地方给出了价值，但在另一个地方，当将 ${employeeId} 作为参数传递给 JS 函数时，它给出了 undefined
angular 是分层的，所以如果你有嵌套的控制器被称为一个更高的值，或者甚至将这些值传递给 $rootScope 将有助于缓解这类问题......如果employeeID 是会话你可以随时在页面上进行 gsp 调用......最初做一些获取并将 rootScope.username 存储为它得到的值.....
你不应该为此而疯狂。您可以将 rootscope 注入任何控制器并获取设置值....但如前所述，它的全局范围是 xontroller 的本地范围。但是忘记了詹姆斯的方法，所以我自己去扶他。 .
如果您有时间创建新应用，请安装被捕插件。您将在更高层看到 rootScope 调用，即usercontrl 和 navbar 等...您还可以了解如何运行查询 grails 应用程序并将结果返回到 angular 的服务。