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

Question

这是我第一次使用Angular JS进行试用，并且陷入了一个非常基本的步骤。我有一个AngularJS前端和Grails后端。以下是我的问题所遵循的代码片段。

1. 网址映射条目：

作为

"/graph"(controller: 'Graph')

1. 这是我的Grails控制器/动作，呈现GSP：

作为

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

1. 这是AngularJS文件，保存为graph.gsp：



当我提供URL：hostname：port / graph时，我能够看到正文显示为＆＃34;嗨！欢迎＆＃34 ;.但是，我无法找到一种（简单）方式来阅读该employeeId并将其显示为＆＃34;嗨！欢迎197040＆＃34; （即能够读取从后端发送的变量employeeId）

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

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

Answer 1

试试这个：

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

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

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

有一个很好的教程，在这里使用Angular with Grails http://claymccoy.blogspot.com.au/2012/09/grails-with-angularjs-and-coffeescript.html?m=1

Answer 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

Answer 3

这里的另一件事是，这是gsp afterall ..你的grails变量将按正常方式工作，就像你定义布局一样..

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

这将是推回该信息的Grails ....

替代方案是这样的：如此演示网站上的每项服务所示.. https://github.com/vahidhedayati/testingarrested/blob/master/grails-app/assets/javascripts/testingarrested/arrestedServices.js

也许你想尝试一下自己作为一个演示版本，然后以上面的服务为例，并根据自己的用途进行更改。