Question

问题

即时通讯使用twig模板＆amp; angular js。

控制器

 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代码

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

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

看起来twig正在处理变量（消息是通过测试控制器呈现的symfony
虽然我们没有通过测试控制器在twig中呈现消息变量。
我知道问题是twig与angular js变量冲突
因此我使用谷歌搜索已启用的更改，但好像它无法正常工作

可以通过分离语法（twig / angular js）

来实现

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

更新

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

   {% endverbatim %}

现在{{message}}正在浏览器上打印，角度不适用于该情况。

我需要什么

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

Answer 1

Angular可以与symfony混合使用，但并不总是一个好主意。在你的例子中，yuo give

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

这意味着对于树枝中的角度，您需要使用[[变量]]而不是{{变量}}

Angular js Variable不适用于Twig

1 个答案: