Adding AngularJS directives and CSS classes to Twig template body block {% block body %}

Question

I'm building a Rest API with Symfony 3 and Fosresbundle and I use AngularJS to retrieve JSON datas inside twig templates.

For some reasons, I need to set angularJS directives and css classes just in the body tag but don't know how to perform that because in Twig, body tag is translated in block like this :

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

Please how can I add angularJS directives and CSS classes in that Twig body block to get something similar to this HTML script :

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

And my code looks a bit like :

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 %}

In my opinion, if you are using Angular, you don't need Twig. Just write it using angular. Angular has a way of doing everything that Twig does, and then some. — ILikeTacos
– ILikeTacos, Commented Dec 17, 2016 at 17:30

Francesco Borzi · Accepted Answer · 2016-12-17 20:50:00Z

1

In order to use the body twig block, your template is extending another template where that block is defined.

For example, assuming that your template is extending /app/Resources/views/base.html.twig, you simply need to open that file (or whatever file your template is inheriting from) and edit the 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>

answered Dec 17, 2016 at 20:50

Francesco Borzi

62.9k56 gold badges202 silver badges279 bronze badges

Symfony error message : A template that extends another one cannot include contents outside Twig blocks. Did you forget to put the contents inside a {% block %} tag in ...

kabrice
– kabrice

12/17/2016 20:56:17
Commented Dec 17, 2016 at 20:56
I'm seeing it now, first you are including the closing tag </head> in the stylesheets twig block, but the opening tag <head> is outside of the twig block, which is logically wrong. Either put both inside or outside of the block.

Francesco Borzi
– Francesco Borzi

12/18/2016 08:51:55
Commented Dec 18, 2016 at 8:51
also <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" /> is outside of the head, should be inside

Francesco Borzi
– Francesco Borzi

12/18/2016 08:52:43
Commented Dec 18, 2016 at 8:52
1

and where is the <body> ? I think you made too confusion among the html/twig structure... your code should look like something like this: paste.ubuntu.com/23646957

Francesco Borzi
– Francesco Borzi

12/18/2016 08:56:33
Commented Dec 18, 2016 at 8:56
@EdgarKAMDEM I'm glad to hear that, please mark this question as answered

Francesco Borzi
– Francesco Borzi

12/18/2016 18:21:09
Commented Dec 18, 2016 at 18:21

Add a comment |

Collectives™ on Stack Overflow

Adding AngularJS directives and CSS classes to Twig template body block {% block body %}

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related