Angular js Variable is not working with Twig

Question

problem

im using twig template & angular js.

controller

 public function testAction()
{
  $this->render('AcmeDemoBundle:abc.html.twig');
 }

js code

    var scotchApp = angular.module('scotchApp', ['ngRoute']);

 angular.module('scotchApp', [])
.config(['$interpolateProvider', function ($interpolateProvider) {
  $interpolateProvider.startSymbol('[[');
 $interpolateProvider.endSymbol(']]');
 }]);

 scotchApp.config(function($routeProvider)
{
   $routeProvider
   //route for home page
           .when('/', {
               templateUrl:'http://localhost/example/example/web/app_dev.php/home',
                controller:'mainController'

        })
        //route for the about page
                .when('/about',{
                 templateUrl:'http://localhost/example/example/web/app_dev.php/about1',
                 controller:'aboutController'

        })
         //route for the contact page
                .when('/contact',{
                 templateUrl:'http://localhost/example/example/web/app_dev.php/contact',
                 controller:'contactController'

        });
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {

    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});

html code

 <div class="jumbotron text-center" ng-model="test">
    <h1>About Page</h1>

    <p>{{ '{{'~ message ~'}}' }}</p>
 </div>

Its seems like twig is treating variable (message to be symfony rendered through test controller
whereas we have not rendered message variable in twig through test controller.
i knew problem is twig is conflicting with angular js variable
therefore i have googled enabled changes ,but as if its not working

it can be possible through seperating syntax (twig/angular js)

  link : https://docs.angularjs.org/api/ng/provider/$interpolateProvider

update

 {% verbatim %}
  <div ng-app="scotchApp" ng-controller="aboutController">
    {{message}}
 </div>

   {% endverbatim %}

now {{message}} is printing on browser ,angular is not working on that case.

what i need

    i need to render message variable to twig file through angular js

You can't. Twig is backend, angularjs is frontend. Backend is always ran first, by server. Then u can process data in frontend, on client. — RaV, May 24 '16 at 08:46
http://stackoverflow.com/questions/13671701/angularjs-twig-conflict-with-double-curly-braces - check this out. And you can test it by simply viewing a code of page you are generating. Don't use investigate element all the time. Use view page source. — RaV, May 24 '16 at 08:48
angular js is not working when using {% verbatim %} twig engine — afeef, May 24 '16 at 09:21
everything inside the verbatim tag should be parsed by angular -- are you sure angular is working in general? is the angular javascript being loaded successfully? have you included `ng-app` and invoked the angular controller? — Karl Wolf, May 24 '16 at 09:37
thanks kaozentene now its working i was missing some syntax that you have pointeed — afeef, May 24 '16 at 10:08

score 0 · Answer 1 · answered May 24 '16 at 14:44

Angular can be mixed with symfony,but not always is a good idea . In your example yuo give

 $interpolateProvider.startSymbol('[[');
 $interpolateProvider.endSymbol(']]');

That means that for angular in twig you need to use [[variable]] instead of {{variable}}

Angular js Variable is not working with Twig

1 Answers1