javascript - 如何将 Symfony 变量传递给 AngularJS

Question

我试图从 symfony 3 变量获取到 AngularJS 来修改并显示它，但是如何从 Symfony 到 AngularJS“共享”？

让我这样解释一下，当我从 Symfony $this->render 传递到 Twig 并使用 {{ name.firstName }} 时，即使我使用转储或仅使用 var，它也会显示/工作，但我不知道如何将变量“name.firstName”的数据传递给 AngularJS 以在 AngularJS 中进行修改，有人可以帮助我吗？？？

(澄清一下，我没有使用 JQuery 或其他东西，只使用 JS、AngularJS 和 Symfony3)

这是我的代码:

检查 Controller .php

/**
     * @Route("/payment", name="PaymentCheck.payment")
     * @return Response
     */
    public function indexAction(Request $request): Response
    {
        $customer = $this->getCustomer();

        /.../ more code /.../

        return $this->render(':PaymentCheck:index.html.twig', [
            'customerProfile' => $customer,  //<---- variable
            'order' => $recalculatedOrder->getOrder(),
            'form' => $clickToCallForm->createView(),
        ]);
    }

index.twig.html

    <div ng-if="shippingOptions.currentTab == 'homeDelivery'">
        <div class="address-book-section">
          <div class="choose-address">{{ 'PaymentCheck.select_shipping_address'|trans }}</div>
          {# it show, but how can I pass the variable to AngularJS? the customerProfile one #}
          {{ dump(customerProfile) }} 
          <address-book type="shipping" creatable="true" selectable="true"></address-book>
          </div>

          <div ng-repeat="package in PaymentCheck.order.packages">
                {% include ':PaymentCheck:itemList.html.twig' with {onlyUndeliverables: true} %}
        </div>
    </div>

Answer 1

好的、坏的和丑陋的

好的

在应用程序和 Controller 中，设置一个变量以填充主布局模板中的 Angular 变量。请记住，您应该能够大幅改进这一点，使其更加干净，并且不受大多数​​ Controller 的影响。为了简单起见，这个例子有点难看。

Controller

return $this->render(':Checkout:index.html.twig', [
    'angular' => [
         'customerProfile' => $customer,
    ],
    'order' => $recalculatedOrder->getOrder(),
    'form' => $clickToCallForm->createView(),
]);

布局

<script type="text/javascript">
    SymfonyDataForAngular = {
        {% for key, value in angular %}
            {{ key }}: '{{ value }}',
        {% endfor %}
    };
</script>

..然后您可以在任何地方从 javascript 调用 SymfonyDataForAngular.customerProfile。

坏处

在 Angular 中创建一个 ajax 请求，以 json 形式返回您需要的数据。这可能实际上是最好的方法，只要您对其进行构建，这样您就只能为每个用户操作进行一次 AJAX 调用。

Controller

public function getCustomerAjax()
{
    return new JsonResponse([
        'customerProfile' => $this->getCustomer()
    ]);
}

丑陋

在 Controller 中创建 View 变量，将它们转储到 JavaScript 变量中以供 Angular 访问。

我不会为此举一个例子，因为如果人们开始这样做，每个人都会恨我。此外，它与我已经给出的第一个示例很接近。