将变量从 Symfony2 传递到 Angular 范围的最佳方法答案

【问题标题】：Best way to pass variables from Symfony2 to Angular scope将变量从 Symfony2 传递到 Angular 范围的最佳方法
【发布时间】：2015-08-13 17:04:17
【问题描述】：

作为许多其他开发人员面临的常见情况 - 我们有一个基于 Symfony2 / TWIG 的成熟应用程序，并且一些 html.twig 模板因 jQuery 代码而过多且难以维护。扔掉 jQuery 并使用 Angular 怎么样？如果我有一些关于角度模块、控制器、服务和范围的基本知识，以及对 Symfony2/TWIG 的深入了解，我的第一个问题是 - 将变量从我现有的控制器/树枝模板传递到角度的最佳方法是什么？控制器？

我不想通过单独的 JSON 调用和 Symfony2 中的单独控制器来加载范围。只想使用我在树枝中的现有变量。

一种方法是声明一些全局 js 变量：

<script>
var window.someVar = {{ twig_object | json_encode() }};
</script>

然后做某事

<div ng-controller="myCtrl" ng-init="init()">
<div ng-model="someVar"> .... </div>
</div>

在控制器中

app.controller('myCtrl', ['$scope', function($scope) {
$scope.init = function () {
    if (window['someVar']) {
        $scope['someVar'] = window['someVar'];
    }
};

但这对我来说似乎太难看了（3 个步骤）是否可以至少简化或以其他方式完成？

【问题讨论】：

我自己的经验是，你会不断地与 AngularJS 作斗争。对我来说，在我的路由中添加 _format=json 参数然后从控制器返回 json 会更容易。让 AngularJS 开心，让树枝远离画面。另外，您不必处理整个花括号问题。
@Cerad 我对花括号问题很好奇。在 MVC（我使用）中，我们引入了带有 at @ 符号的服务器端变量，但是您在此处使用与服务器端相同的语法（用于插值）（用于从服务器）！你不是时不时遇到问题，还是因为服务器先看到代码就OK了？
@JMK - 我不明白你的问题。我通过将 twig 和 angularjs 模板保存在单独的文件中来避免卷曲问题。 angularjs 直接提供，根本不经过 S2。
@JMK - 似乎没有任何花括号问题。我通常在我的模块中使用 $interpolateProvider，将 [[ ]] 用于 angular，将 {{ }} 用于 Twig。还是我在监督？

标签： angularjs symfony twig

【解决方案1】：

你可以直接在ng-init中声明变量，所以：

<div ng-controller="myCtrl" ng-init="myModel.someVar='{{ twig_object | json_encode() }}';">

我更习惯于 ASP.Net MVC 中的 Razor，但我认为 Symfony2 也适用相同的原则。

还请记住双点规则，您不希望直接在 $scope 上声明值。

【讨论】：

你能解释一下最后一句话吗？为什么我不能写 ng-init="someVar='{{ twig_object | json_encode() }}';"它会用 twig_object 初始化 $scope.someVar 吗？表示双点原则。
原理没问题，但是代码不行，看我下面的回答，正确的代码才能让它工作

【解决方案2】：

在这种情况下，您的选择是有限的。如果您不想进行额外的调用，则必须将数据作为全局变量注入页面（@JMK 提供了一种更有用的方法，ngInit）。它可以是简单的变量，但我发现以某种对象的形式编写它并从这个全局值设置一个常量服务更方便。之后，此常量可以在整个应用程序中使用。

<script>
window.config = {{ twig_object | json_encode() }};
</script>

然后创建一个常量（或value）：

app.constant('config', {data: window.config});

在控制器中

app.controller('myCtrl', ['$scope', 'config', function($scope, config) {
    $scope.init = function () {
        $scope.someVar = config.someVar;
    };
}]);

【讨论】：

是否可以在不调用 ng-init 的情况下初始化 $scope.someVar，就像在控制器的构造函数中一样？
是的，这是可能的，但您仍然需要以某种方式将此数据写入您的控制器。如果您的应用位于单独的 js 文件中，那么您再次需要将其作为全局变量或作为某个元素上的 ng-init 写入 HTML。

【解决方案3】：

实际上我认为这是最简单的解决方案：

<div ng-init='somevar = {{ somevar|raw|replace({"'":"\\'"}) }}'>

【讨论】：

这段代码通过somevar变量引入了XSS漏洞。