Angular js Variable不适用于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 

Answer 1

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