在 Swig 上使用 Angular 从视图中解释数据的更有效方法？

Question

我有一个 JSON 对象数组从我的节点路由传递到其各自的视图。例如：

res.render("path/to/view", { data: result, data2: result2 })

其中 result 和 result2 都是 JSON 对象的数组。在我看来，我在 ng-init 函数中使用它们，如下所示：（{{}} 指定 swig，我已将 [[]] 更改为指定 Angular，因此在下面的示例中，我们使用在使用我定义的 Angular 初始化函数之前痛饮）

<div ng-init="init( {{ data|json }} )"> </div>

我应该说上面的例子工作正常，但是当 "data" 变成一个非常大的数据集时，很多时间花在了 swig 部分——即将它转换为 JSON（再次..？）。就像我说的，"data" 已经是 JSON 的形式，但是当我从上面的 swig 部分中删除 |json 时，我得到一个 [$parse:syntax] 错误，并且它给了我上面的行但评估：

<div ng-init="init( [object Object],[object Object] )"> </div>

我尝试了使用 ng-init="init( [[ JSON.parse( {{ data }} ) ]] )" 的变体，以便我将输出评估为 JSON（即使输出已经是..？）但无法使任何工作正常进行。

有什么想法吗？也许我语法错误？我不明白，因为当我将它传递给视图时 "data" 是 JSON，但我不能将它直接传递到我的 init 函数中而不会出现语法错误。

Answer 1

将您使用 ng-init 调用的任何内容从您的视图中取出，并将其放入控制器或服务中。

不使用 ng-init 的原因有很多，以至于 Angular 团队基本上建议您不要使用它：https://docs.angularjs.org/api/ng/directive/ngInit

更新

我终于明白你在做什么了，这叫做引导。您可以像这样将数据嵌入到您的视图服务器端：

<script>
  angular.module("app").constant("myBootstrap", {{ data.stringified }});
</script>

其中 data.stringified 是您的字符串化数据。然后在 Angular 中，您可以使用 myBootstrap 作为常量注入任何您想要的控制器，与 $rootScope 相同，等等，数据将可用。

Answer 2

因此，虽然我不完全确定是什么导致它运行如此缓慢，但我找到了解决方案，尽管 'hack' 可能更准确地描述了它。我遇到的问题是 Swig 在将数据传递给 init 函数之前花了很长时间来模板化我的数据（我现在知道这是不好的做法；也就是说，使用 ng-init 来调用函数）。

我应该为未来的读者注意，我正在使用 Node.js、Swig 进行模板化，并使用 Angular 来处理 MVC 方面的事情。

看上面的问题看看我之前的代码是什么样的（慢版）。以下是我的解决方案：

路由端

var rawSQLData = makeSQLCall();
var parsedAsJsonSQLData = parseData(rawSQLData);
var parsedDataAsString = JSON.stringify(parsedAsJsonSQLData);
res.render("path/to/view", { data: parsedDataAsString });

HTML

<div ng-init=" init( {{ data|json }} )">   </div>

Angular 控制器

$scope.init = function(data){
    $scope.dataInScope = JSON.parse(data);
}

如您所见，我唯一更改的是在将 JSON 发送到 HTML 之前将其字符串化，然后在它到达控制器后对其进行解析。

我认为这可行的原因是因为我基本上是在模板引擎 (Swig) 以外的部分进行所有 JSON 处理。我尝试不使用过滤器，但 Swig 默认将数据转换为 JSON，这破坏了我的 HTML。我想称其为 hack 而不是解决方案的原因是因为我们将数据字符串化，然后对 Swig 使用 json 过滤器，根据文档：

Return a string representation of an JavaScript object.

如果我不得不猜测，我会说通过在字符串上使用 json 过滤器，Swig 决定它无关紧要，因为对象已经是一个字符串并且只是传递它（只是什么我一直想要！）。令人难以置信的是，当 Swig 不接触数据时，它的速度要快得多。 JSON stringify 和 parse 对于数据大小来说确实很快，而 Swig 最多需要 40 秒

在 Swig 上使用 Angular 从视图中解释数据的更有效方法？

More efficient way to interpret data from route in view with Angular over Swig?

javascript

json

angularjs

node.js

swig-template