好的，坏的和丑陋的

Question

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

让我用这种方式解释当我从Symfony $ this-＆gt;渲染到树枝并使用{{name.firstName}}它显示/工作时即使我使用转储或仅使用var，我不知道如何将AngularJS中变量“name.firstName”的数据传递给AngularJS，有人可以帮我吗???

（澄清我没有使用JQuery或其他东西，只有JS，AngularJS和Symfony3）

这是我的代码：

CheckController.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

好的，坏的和丑陋的

好的

在app和Controllers中，设置一个变量以在主布局模板中填充Angular Variables。请记住，您应该能够彻底改进这一点，使其更加清洁，并且大部分控制器都能使用。为简单起见，这个例子有点难看。

控制器

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调用。

控制器

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

丑陋的

在控制器中创建视图变量，将它们转储到javascript变量中以供Angular访问。

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

如何将Symfony变量传递给AngularJS

1 个答案:

好的，坏的和丑陋的

好的

坏

丑陋的