Question

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

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

一种方法是声明一些全局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个步骤）可以至少简化或以其他方式完成吗？

Answer 1

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

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

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

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

Answer 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;
    };
}]);

Answer 3

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

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

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

3 个答案: