将 AngularJS 指令和 CSS 类添加到 Twig 模板主体块 {% block body %}答案

【问题标题】：Adding AngularJS directives and CSS classes to Twig template body block {% block body %}将 AngularJS 指令和 CSS 类添加到 Twig 模板主体块 {% block body %}
【发布时间】：2016-12-17 17:14:14
【问题描述】：

我正在使用 Symfony 3 和 Fosresbundle 构建一个 Rest API，并使用 AngularJS 检索树枝模板中的 JSON 数据。

由于某些原因，我需要在 body 标签中设置 angularJS 指令和 css 类，但不知道如何执行，因为在 Twig 中，body 标签是这样翻译成块的：

{% block body %}
...
{% endblock %}

请问如何在 Twig 主体块中添加 angularJS 指令和 CSS 类以获得类似于此 HTML 脚本的内容：

<body class="myClass" ng-app="myApp" ng-controller="myController">
...
</body>

我的代码看起来有点像：

Base.html.twig：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Mytitle{% endblock %}</title>
        {% block stylesheets %}
            <meta charset="UTF-8">  
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
            <link rel="stylesheet" href="{{ asset('css/font-awesome/css/font-awesome.min.css') }}">
            <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
            <link rel="stylesheet" type="text/css"  href="{{ asset('css/mystuff.css') }}" />

        <style>
            iframe {
                height: 100% !important;
                width: 100% !important;
                overflow: hidden;

            }

        </style>
    </head>
        {% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />

        {% block body %}

        {% endblock %}
        {% block javascripts %}
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
            <script src="https://code.angularjs.org/1.5.8/i18n/angular-locale_fr-fr.js"></script>
            <script type="text/javascript" src="{{ asset('js/app.js') }}" ></script>
            <script type="text/javascript" src="{{ asset('library/jquery/jquery-2.1.4.min.js') }}"></script>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
            <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
            <script type="text/javascript" src="{{ asset('js/mystuff.js') }}" ></script>

            <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>


        {% endblock %}
 
</html>

index.html.twig

{% extends 'base.html.twig' %}

{% block body %}

    <div class="container-fluid" ng-app="myApp" ng-controller="myController" ng-init="getContenurByID({{ idConteneur }})">

        
        <div class="row rowLectureContenu">
            <div class="col-sm-12 col-md-7 col-lg-7 no-float" style="padding: 0 !important; border: 1px solid lightgrey">
                <iframe ng-src="{[{contenuURL}]}" style="border: none;"></iframe>

            </div>
            <div class="hidden-sm hidden-xs col-md-5 col-lg-5  no-float" style=" padding:0; border: 1px solid lightgrey">
                
                Content...

            </div>
        </div>
    </div>

{% endblock %}

【问题讨论】：

在我看来，如果您使用 Angular，则不需要 Twig。只需使用角度编写它。 Angular 有办法做 Twig 所做的所有事情，而且还有一些。

标签： angularjs html twig symfony

【解决方案1】：

为了使用body twig 块，您的模板正在扩展另一个定义该块的模板。

例如，假设您的模板扩展 /app/Resources/views/base.html.twig，您只需打开该文件（或您的模板继承自的任何文件）并编辑 html：

<html> <head> <meta charset="UTF-8" /> <title>{% block title %}Welcome!{% endblock %}</title> {% block stylesheets %}{% endblock %} <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" /> </head> <body class="myClass" ng-app="myApp" ng-controller="myController">> {% block body %}{% endblock %} {% block javascripts %}{% endblock %} </body> </html>

【讨论】：

Symfony 错误信息：A template that extends another one cannot include contents outside Twig blocks. Did you forget to put the contents inside a {% block %} tag in ...
我现在看到了，首先你在stylesheets twig 块中包含结束标签</head>，但开始标签<head> 在twig 块之外，这在逻辑上是错误的。要么放在块的内部，要么放在块的外部。
还有<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />在head之外，应该在里面
<body> 在哪里？我认为您在 html/twig 结构中过于混乱...您的代码应该如下所示：paste.ubuntu.com/23646957
@EdgarKAMDEM 很高兴听到这个消息，请将此问题标记为已回答