Question

我创建了一个简单的AngularApp，并尝试将其与symfony2.8一起使用。正如所建议我使用friendsofsymfony / jsrouting-bundle来暴露我的路线。这是我的twig（HTML）代码即。 index.html.twig：

<!doctype html>
<html ng-app="App" >
<head>
  <meta charset="utf-8">
  <title>Todos $http</title>
  <link rel="stylesheet" href="style.css">
  <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
  <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="app.js"></script>
</head>

{% block body %}
{% verbatim %}
<body ng-controller="TodoCtrl">
  <ul>
    <li ng-repeat="todo in todos">
      {{todo.text}} - <em>{{todo.done}}</em>
    </li>
  </ul>
</body>
</html>
{% endverbatim %}
{% endblock %}

我很确定我在这里犯了一些错误。这是AngularJS代码即。 app.js：

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

App.controller('TodoCtrl', function($scope, $http) {
//    window.alert('hi');
  $http.get(Routing.generate('AppBundle/Resources/public/js/todos.json'))
       .then(function(res){
          $scope.todos = res.data;                
        });
});

如果需要的话是todos.json：

[{ "text":"learn angular", "done":true },
 { "text":"build an angular app", "done":false},
 { "text":"something", "done":false },
 { "text":"another todo", "done":true }]

当我尝试运行输出时，我得到的是

您可以在控制台中注意到angular.element($0).scope()返回undefined。

有什么想法吗？

编辑：

我在index.html.twig：

中做了一些更改

{% extends 'base.html.twig' %}

{% block javascripts %}
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
    <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
    <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
    <script>
        var App = angular.module('App', []);

        App.controller('TodoCtrl', function($scope, $http) {
//    window.alert('hi');
            $http.get(Routing.generate('@AppBundle/Resources/public/js/todos.json'))
                    .then(function(res) {
                        $scope.todos = res.data;
                    });
        })
    </script>
{% endblock %}
{% block body %}
    {% verbatim %}
        <body ng-app="App" ng-controller="TodoCtrl">
            <ul>
                <li ng-repeat="todo in todos">
                    {{todo.text}} - <em>{{todo.done}}</em>
                </li>
            </ul>
        </body>
    {% endverbatim %}
{% endblock %}

base.html.twig在这里：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        {% block body %}

        {% endblock %}
        {% block javascripts %}

        {% endblock %}
    </body>
</html>

正如您所看到的，AngularJS代码不在外部文件中，而是在树枝（HTML）文件中的标记内。现在我得到以下结果：

在控制台angular.element($0).scope()中返回Child {$id: "003", this: Child, $$listeners: Object, $parent: Object, $$asyncQueue: Array[0]…}

但是angular.element($0).scope().todos返回undefined。

我应该在此行$http.get(Routing.generate('@AppBundle/Resources/public/js/todos.json'))中为Routing.generate方法提供什么参数？

我认为任何有FOSjsRouting Bundle经验的人都应该能够弄明白。

那里有天才吗？

Answer 1

在树枝上试试这个{{＆＃34; {{todo.text}}＆＃34;}} - {{＆＃34; {{todo.done}}＆＃34;}}

AngularJS与Symfony2（friendsofsymfony / jsrouting-bundle）

1 个答案: