文章/答案/技术大牛

发布

社区首页 >问答首页 >无法在路由后将$scope分配给部分模板

问无法在路由后将$scope分配给部分模板
EN

Stack Overflow用户

提问于 2015-04-07 18:12:56

回答 2查看 34关注 0票数 0

我想做一个网站，加载所有必要的模板，在第一次访问该网站。我只有一个部分模板，但希望最终添加更多。然而，即使只有这个模板，我也无法获得从api接收到的数据来绑定到我的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"
    }]

javascript

angularjs

angularjs-ng-repeat

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-04-07 19:14:03

结果发现，angular.js标记与我的django后端标记相冲突。我加了

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

要更改angular.js查找的内容，它成功了:D

票数 0

Stack Overflow用户

发布于 2015-04-07 18:43:53

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

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

也许你的json反应是把它扔了？你能把json寄出去吗？

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29498310

复制

相似问题

问无法在路由后将$scope分配给部分模板
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法在路由后将$scope分配给部分模板EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法在路由后将$scope分配给部分模板
EN