Question

我想建立一个网站，在第一次访问网站时加载所有必要的模板。我只有一个部分模板，但最终想要添加更多。但是，即使只使用这一个模板，我也无法将从api收到的数据绑定到我的html中。

HTML

<!DOCTYPE html>
    <html lang="en" ng-app="tophueApp">
        <body>
            <div ng-view></div>

            <script type="text/ng-template" id="two_column.html">
                <div id="two_column_container">
                    <div id="left_pane">
                    <div class="material_background">
                        <div ng-repeat="post in posts" class="post_block">
                            <a href="/post/{{post.pk}}/{{post.url_safe_title}}" class="title_text" onclick="return     show_inline(this,'{{post.source_site}}')">
                                <span ng-if="post.is_NSFW" class="is_NSFW">
                                    NSFW
                                </span>

                                {{post.title}}
                            </a>
                <span class="post_info">
                    </span>
                </span>
                </div>
                </div>
                    </div>
                </div>
            </script>

            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
            <script src="base.js"></script>
            <link rel="stylesheet" href="base.css" />
        </body>
    </html>

base.js

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

tophueApp.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.
      when('/topic/:topicName/', {
        templateUrl: 'two_column.html',
        controller: 'TopicController'
      }).
      when('/', {
        templateUrl: 'two_column.html',
        controller: 'HomeController'
      }).
      otherwise({
        redirectTo: '/'
      });

    $locationProvider.html5Mode({
                     enabled: true,
                     requireBase: false
              });
  }]);

tophueApp.controller('TopicController', ['$scope', '$http', '$routeParams',
    function($scope, $http, $routeParams) {
        $http.get('/api/topic/'+$routeParams.topicName+'/').success(function(data) {
        $scope.posts = data;
    });
}]);

tophueApp.controller('HomeController', ['$scope', '$http',
    function($scope, $http) {
        $http.get('/api/home.json').success(function(data) {
        $scope.posts = data;
    });
}]);

所以，当我转到/topic/topicname的页面时，我从api获得了正确的json响应，但它没有绑定到部分模板。

编辑:( json回复）

[{
        "user" : "jack",
        "source_id" : "rX5n0oP",
        "topic" : "swag",
        "title" : "http://i.imgur.com/rX5n0oP.jpg",
        "url_safe_title" : "httpiimgurcomrx5n0opjpg",
        "is_NSFW" : false,
        "source_url" : "http://i.imgur.com/rX5n0oP.jpg",
        "pk" : 8,
        "source_site" : "imgur-img"
    }, {
        "user" : "jack",
        "source_id" : "QW8Sp1O",
        "topic" : "swag",
        "title" : "http://imgur.com/QW8Sp1O",
        "url_safe_title" : "httpimgurcomqw8sp1o",
        "is_NSFW" : false,
        "source_url" : "http://imgur.com/QW8Sp1O",
        "pk" : 1,
        "source_site" : "imgur-img"
    }]

Answer 1

我可以通过用静态json替换api调用来使模板绑定到$ scope，请参阅此笔： http://codepen.io/anon/pen/EazprP

$scope.posts=[{
    title:"Home"
}]

也许你的json回应正在抛弃它？你能发布json吗？

Answer 2

原来angular.js标签与我的django后端标签冲突。我添加了

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

更改angular.js查找的内容并且有效：D

路由到部分模板后无法分配$ scope

2 个答案: