Question

您不需要了解Java Server Pages来回答这个问题，它只用于解释问题的背景和我目前面临的限制。

我目前正在Adobe AEM中开发一个应用程序，它使用Java Server Pages来呈现HTML内容。应用程序的客户端部分使用Angular.js框架。在尝试使用Angular.js框架同时使用Java Server Pages和HTML时，我目前处于一个难题。我需要完成以下事情：

在Java Server Page上，我只想呈现与一个angular.js控制器有关的HTML - 我无法在其中声明一个完整的角度应用程序，否则会在交互时引起问题与其他JSP。
我想传入一个JSON对象，我需要Angular.JS控制器才能正确运行，但我只能通过使用＆＃34; Java＆＃34;来检索这个JSON对象。我的Java Server Pages的一部分 - 我无法从客户端（或javascript部分）获取我需要的JSON对象
指令ng-init允许我在控制器内部放置一个JSON对象，但是当它首先在控制器的$ scope中时，该对象是不可用的跑。我想找到一种方法将JSON对象插入到包含控制器的标记中，并在其函数开始运行之前在其范围内使用它。
我不想简单地将变量放在脚本标记内，以便控制器可以在运行之前找到它 - 我不能有任何全局变量污染命名空间，因为许多JSP将是一次在一个给定的网页上呈现。

考虑以下jsfiddle：http://jsfiddle.net/ttxmg4qd/

这是HTML：

<div ng-controller="MyCtrl" ng-init="foo2 = 'How to make this show up in $scope when MyCtrl is initialized for the first time?';">
{{foo2}}
</div>

这是javascript：

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope) {
    var vm = this;
    $scope.obj = { prop: "world" };
    $scope.foo = "foo";
    alert($scope.foo2); 
});

请注意，我无法访问变量＆＃34; foo2＆＃34;当我使用ng-init指令时，该控制器功能首次运行时。它显示为＆＃34; undefined＆＃34;直到用html中的{{foo2}}绑定进行评估。

如何制作它以便将变量传递给HTML并在控制器开始运行时将其提供给控制器的范围？

Answer 1

将其注释为全局，并通过$window

进行访问

或者您可以使用angular-preloaded将变量注入type="text/preloaded"的脚本代码中，并通过$preloaded服务将其提供给您的控制器。

让你的jsp输出如下所示

<script type="text/preloaded">
{
  "data": "point"
}
</script>

并在你的控制器中获取，如下所示

angular.module('app', ['gs.preloaded'])
.controller('SomeCtrl', function ($preloaded) {
    // do something with $preloaded.
    $preloaded; // => { data: "point", another: { point: "of data" } }
});

请记住在您的控制器脚本之前放置预加载的脚本以使其正常工作。来自docs

注意：您的脚本标记必须在使用$ preloaded之前运行，所以我建议将它们放在文档的头部。

需要将JSON对象插入Angular.JS控制器的范围

1 个答案: