如何使用 Angular js 将 Api 数据渲染到 Twig 文件答案

【问题标题】：How to Render Api Data to Twig file using Angular js如何使用 Angular js 将 Api 数据渲染到 Twig 文件
【发布时间】：2016-09-20 09:55:32
【问题描述】：

我需要什么

我需要在 symfony2 twig 文件中渲染数据。
有人将我的问题标记为重复，我需要使用 angular js 渲染数据，而不是使用 symfony。

js代码

function EntryCtrl ($scope, $http) {
$scope.rootEntry = [];
$http.get('https://api.github.com/users/mralexgray/repos').success(function(root) {
    $scope.rootEntry = root;
    console.log($scope.rootEntry);
});
 }

变量 $scope.rootEntry 的输出

数据

 {
   id: 1,
    name: "afeef",
   price: "20",
   description: "this is test page"
},
{
 id: 2,
 name: "afeef",
 price: "20",
  description: "this is test page"
}

html代码

 <body >
<div class="row" ng-controller="EntryCtrl">
 <---updated code -->
 # i have tried map model as well as
 <table ng-model="rootEntry">
  <div id="treeview" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
        <ul>
        <li ng-repeat="root in rootEntry">{{root.name}}</li>
        </ul>
   </div>
</table>
</div>

  Exception variable  rootEntry is does not exists

控制器代码

 public function checkAction()
 {
    $this->render('bundlename:twigfilename');
 }

错误根条目不存在
我需要在 twig 文件中显示 json 数据

解决方案

    1. it can be done through symfony2 by rendering the json data through controller

    like $this->render('bundlename:twigfilename',array('rootEntry,['jsonstring']);

但我需要发出 http 请求以在 twig 文件中发送数据
我是 Angular js 的新手，欢迎提出任何建议

角度渲染的一般方法

  var mockDataForThisTest = "json=" + encodeURI(JSON.stringify([
   {
    id: 1,
    firstName: "Peter",
     lastName: "Jhons"},
 {
   id: 2,
   firstName: "David",
   lastName: "Bowie"}
 ]));


 var app = angular.module('myApp', []);

function PeopleCtrl($scope, $http) {

  $scope.people = [];

   $scope.loadPeople = function() {
    var httpRequest = $http({
        method: 'POST',
        url: '/echo/json/',
        data: mockDataForThisTest

    }).success(function(data, status) {
        $scope.people = data;
    });

};

}

html代码

   <div ng-app="myApp">
    <div ng-controller="PeopleCtrl">
   <p>    Click <a ng-click="loadPeople()">here</a> to load data.</p>
   <table>
    <tr>
    <th>Id</th>
    <th>First Name</th>
    <th>Last Name</th>
   </tr>
   <tr ng-repeat="person in people">
    <td>{{person.id}}</td>
    <td>{{person.firstName}}</td>
    <td>{{person.lastName}}</td>
   </tr>
   </table>
   </div>
   </div>

但在这个问题中，我如何通过 Angular js 渲染树枝中的数据。

【问题讨论】：

标签： php angularjs json symfony twig

【解决方案1】：

您必须更改 Angular 的插值标记。实际上，twig 使用与 angular: "{{ }}" 相同的插值标记，这就是您出现该错误的原因：twig 期望在您的 symfony 控制器中定义一个变量。为此，您必须配置您的应用程序模块：

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

现在，在您的 twig 页面中使用 [[ ]] 而不是 {{ }}：

<div ng-app="myApp">
   <div ng-controller="PeopleCtrl">
      <p>    Click <a ng-click="loadPeople()">here</a> to load data.</p>
      <table>
          <tr>
              <th>Id</th>
              <th>First Name</th>
              <th>Last Name</th>
          </tr>
          <tr ng-repeat="person in people">
              <td>[[person.id]]</td>
              <td>[[person.firstName]]</td>
              <td>[[person.lastName]]</td>
          </tr>
      </table>
   </div>

希望对你有帮助:)

P.S: 解决 $http 承诺使用 then 而不是 succes (它已被弃用) https://docs.angularjs.org/api/ng/service/$http#deprecation-notice

【讨论】：

【解决方案2】：

对于以后遇到此问题的人：您可以使用{% verbatim %}。它告诉 Twig 不要处理里面的代码。

在接下来的代码中，您将了解如何让 Twig 和 Angular 协同工作。

{{ max(1, 3, 2) }}  <<< The render is done by Twig
{% verbatim %}
<div ng-app="">
  <p>Name : <input type="text" ng-model="name"></p>
  Hello {{name}} <<< The render is done by Angular
</div>
{% endverbatim %}

【讨论】：