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

Question

我需要什么

我需要在 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');
 }

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

解决方案

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

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

但我需要发出 http 请求以在树枝文件中发送数据
我是 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 在树枝中呈现数据。

Answer 1

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

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

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

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

我希望这会帮助你:)

PS：为了解决 $http 承诺使用 then 而不是 succes （它已被弃用） https://docs.angularjs.org/api/ng/service/ $http#deprecation-notice

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

https://ourcodeworld.com/articles/read/215/how-to-use-angular-js-and-twig-without-the-conflict-of-double-curly-braces中的更多信息

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

问题描述

2 个解决方案

解决方案1
0 2016-06-13 09:29:33

解决方案2
0 2020-06-30 14:43:18

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

问题描述

2 个解决方案

解决方案1 0 2016-06-13 09:29:33

解决方案2 0 2020-06-30 14:43:18

解决方案1
0 2016-06-13 09:29:33

解决方案2
0 2020-06-30 14:43:18