Question

我正在尝试从symfony控制器内部从数据库中获取数据，并将响应编码为json格式，这里：

/**
 * @Route("/jsondata", options={"expose"=true}, name="my_route_to_json_data")
 */
public function tagsAction(Request $request)
{        
    $em = $this->getDoctrine()->getManager();
    $query = $em->createQuery(
       'SELECT t.text
       FROM AppBundle:Tag t
       WHERE t.id > :id
       ORDER BY t.id ASC'
       )->setParameter('id', '0');

    $tagsdata = $query->getScalarResult();
    $response = new Response(json_encode($tagsdata));
    $response->headers->set('Content-Type', 'application/json');
    return $response;
}

以下是json的回复：

现在在我的angularJS代码中，我试图通过使用FOSjsrouting Bundle的Routing.generate()来加载这个json数据。在这里：

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

    app.controller('MainCtrl', function($scope, $http) {
    $scope.loadTags = function(query){
    return $http.get(Routing.generate('my_route_to_json_data'));
        };
    });

这是index.html.twig：

{% verbatim %}
    <body ng-app="plunker" ng-controller="MainCtrl">
        <tags-input ng-model="tags" add-on-paste="true">
            <auto-complete source="loadTags($query)"></auto-complete>
        </tags-input>
    <p>Model: {{tags}}</p>
    </body>
    {% endverbatim %}

除了自动完成功能不起作用外，一切正常。有趣的部分是文本文件中的相同代码，就像魅力一样：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
    <script>
      var app = angular.module('plunker', ['ngTagsInput']);

      app.controller('MainCtrl', function($scope, $http) {         
        $scope.loadTags = function(query) {
          return $http.get('tags.json');
        };
      });
    </script>
  </head>

  <body ng-controller="MainCtrl">
    <tags-input ng-model="tags" add-on-paste="true">
      <auto-complete source="loadTags($query)"></auto-complete>
    </tags-input>
    <p>Model: {{tags}}</p>
  </body>

</html>

tags.json：

[
  { "text": "Tag1" },
  { "text": "Tag2" },
  { "text": "Tag3" },
  { "text": "Tag4" },
  { "text": "Tag5" },
  { "text": "Tag6" },
  { "text": "Tag7" },
  { "text": "Tag8" },
  { "text": "Tag9" },
  { "text": "Tag10" }
]

我是AngularJS的新手，任何想法我该如何处理？如果有的话，请在调试要查找的内容时知道，以及如何检查json数据是否已加载。提前谢谢。

以下是控制台的屏幕截图：

Answer 1

Routing.generate('url')是FriendsOfSymfony/FOSJsRoutingBundle

的模块安装前{p> fosJSroutingBundle 并且对于获取数据，请尝试：

      app.controller('MainCtrl', function($scope, $http) {                
          $http.get('tags.json').success(function(result){
              $scope.loadTags = result
          );
      });

Answer 2

试试这个，你需要将json结果与标签绑定。

$http.get("tags.json")
.then(function(response) {
    $scope.tags = response.data;

}）;

Answer 3

AHHA！的xD 最后，这种方法有效：

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

    app.controller('MainCtrl', function($scope, $http) {
      $scope.loadTags = function(query) {
      return $http.get('http://localhost/AngularTags/web/js/tags.json');
       };
    });

注意：在这种方法中，我将我的服务器数据保存在tags.json中，然后加载它。我使用http://localhost/AngularTags/web/js/tags.json作为$ http.get（）的参数。

但是为了将来的使用，我需要弄清楚如何使用FOSjsRouting Bundle的Routing.generate（）。

$ http.get（Routing.generate（my_route_to_json））

3 个答案: