Reference Symfony2 template in AngularJS directive

Question

I am trying to reference a twig file (mapCities.html.twig), from my main bandle, in a custom directive. Can anyone help me with this?

app.directive('customDirective', function() {
  return {
    restrict: 'E',
    templateUrl: 'mapCities.html',
    // template: '<div id="sampleCode">This is sample code</div>',
    replace: true
  }
})

At the moment I am getting an 404 (as expected).
My project is in Symfony2 & AngularJS

Angular is a front-end library and thus needs front-end access to the file you're trying to reference. Your mapCities.html.twig file is a view file internal to your Symfony app. It must be exposed using some sort of Route -> Controller -> View combo. — sjagr
– sjagr, Commented Mar 30, 2015 at 14:58
You are right on this. I changed it with an HTML file but still it doesn't work. I just read that the templateURL can optionally contain a DOM element id when the template is defined in <script> tags. — JKoder
– JKoder, Commented Mar 30, 2015 at 15:02
I understand what templateUrl is. You simply can't access a Twig file directly using it. — sjagr
– sjagr, Commented Mar 30, 2015 at 15:05
We agree on this. I just altered my code so instead of a twig file I am trying to reference an html file. but it still doesn't work. — JKoder
– JKoder, Commented Mar 30, 2015 at 15:06

sjagr · Accepted Answer · 2015-03-30 15:13:55Z

4

Twig views are not directly accessible from the front-end. You must set up a route in routing.yml to access the file using the basic rendering controller:

acme_bundle_map_cities:
    path: /mapCities
    defaults:
        _controller: FrameworkBundle:Template:template
        template:    'AcmeBundle:Static:mapCities.html.twig'

Then modify your directive to match this route:

app.directive('customDirective', function() {
  return {
    restrict: 'E',
    templateUrl: '/mapCities',
    // template: '<div id="sampleCode">This is sample code</div>',
    replace: true
  }
});

Make sure you modify your values accordingly.

answered Mar 30, 2015 at 15:13

sjagr

16.6k5 gold badges43 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Darragh Enright Over a year ago

Fantastic. I wasn't aware of the basic rendering controller. That'll save some boilerplate in future. Thanks.

kabrice Over a year ago

You saved my day ! It worked super astonishingly and amazingly great :)

Collectives™ on Stack Overflow

Reference Symfony2 template in AngularJS directive

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related