角js无限滚动django休息框架

我一直在这里关于无限滚动本教程。角js无限滚动django休息框架

http://en.proft.me/2015/09/4/how-make-infinity-scroll-loading-bar-angularjs/

但由于某种原因它抛出我这个错误

“angular.js：38Uncaught错误：[$注射器：modulerr”

我做错了什么吗？

即时通讯Django休息框架和角js新手。

我想在这里实现的是将API json数据加载并注入到html中（我做了），并让它滚动并可点击。（有超链接，但不刷新页面）

任何人都可以看看代码？

的index.html

<body> 

<div class="pinGridWrapper" ng-app="PinApp" ng-controller="PinCtrl"> 
    <div class="pinGrid" infinite-scroll='pins.more()' infinite-scroll-disabled='pins.busy' infinite-scroll-distance='1'> 
    <div class="pin" ng-repeat="pin in pins.items"> 
       <img ng-src="{$ pin.photo $}"> 

    <div ng-app="myApp" class="app"> 
    <div ng-controller="appCtrl as vm" class="main-container"> 
     <h1>Post List</h1> 
     {% verbatim %} 
     <div ng-repeat="post in vm.posts | limitTo: 10" class="post"> 
     <a href="{{ post.url}}"> 
      <h2>{{ post.title }}</h2> 
      <p>{{ post.content }}</p> 
     </a> 
      <p ng-if="vm.loadingPosts">Loading...</p> 
     </div> 
     {% endverbatim %} 
    </div> 
    </div> 


     <p ng-bind-html="pin.text"></p> 
    </div> 
    </div> 

    <div ng-show='pins.busy'><i class="fa fa-spinner"></i></div> 
</div> 






<!-- Latest compiled and minified JavaScript --> 
<script src="http://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script> 


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<script src='https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js'></script> 

<script> 
/* ng-infinite-scroll - v1.0.0 - 2013-02-23 */ 
var mod;mod=angular.module("infinite-scroll",[]),mod.directive("infiniteScroll",["$rootScope","$window","$timeout",function(i,n,e){return{link:function(t,l,o){var r,c,f,a;return n=angular.element(n),f=0,null!=o.infiniteScrollDistance&&t.$watch(o.infiniteScrollDistance,function(i){return f=parseInt(i,10)}),a=!0,r=!1,null!=o.infiniteScrollDisabled&&t.$watch(o.infiniteScrollDisabled,function(i){return a=!i,a&&r?(r=!1,c()):void 0}),c=function(){var e,c,u,d;return d=n.height()+n.scrollTop(),e=l.offset().top+l.height(),c=e-d,u=n.height()*f>=c,u&&a?i.$$phase?t.$eval(o.infiniteScroll):t.$apply(o.infiniteScroll):u?r=!0:void 0},n.on("scroll",c),t.$on("$destroy",function(){return n.off("scroll",c)}),e(function(){return o.infiniteScrollImmediateCheck?t.$eval(o.infiniteScrollImmediateCheck)?c():void 0:c()},0)}}}]); 



var app = angular.module('PinApp', ['ngAnimate', 'ngSanitize', 'ngResource', 'infinite-scroll']); 

app.config(function($interpolateProvider, $httpProvider, cfpLoadingBarProvider) { 
    $interpolateProvider.startSymbol('{$'); 
    $interpolateProvider.endSymbol('$}'); 
    cfpLoadingBarProvider.includeSpinner = false; 
}); 

app.factory('Pin', function($http, cfpLoadingBar){ 
    var Pin = function() { 
     this.items = []; 
     this.busy = false; 
     this.url = "/api/posts/?limit=2&offset=0"; 
    } 

    Pin.prototype.more = function() { 
     if (this.busy) return; 
     if (this.url) { 
      this.busy = true; 
      cfpLoadingBar.start(); 
      $http.get(this.url).success(function(data) { 
       var items = data.results; 
       for (var i = 0; i < items.length; i++) { 
        this.items.push(items[i]); 
       } 
       this.url = data.next; 
       this.busy = false; 
       cfpLoadingBar.complete(); 
      }.bind(this)); 
     } 
    }; 
    return Pin; 
}) 


app.controller('PinCtrl', function($scope, Pin){ 
    $scope.pins = new Pin(); 
    $scope.pins.more(); 
}); 
</script>

urls.py

from django.conf.urls import url 
from django.contrib import admin 

from .views import (
    PostListAPIView, 
    PostDetailAPIView, 
    PostUpdateAPIView, 
    PostDeleteAPIView, 
    PostCreateAPIView, 
    ) 

from django.conf.urls import patterns, url, include 
from .views import PostListView 


urlpatterns = [ 
    url(r'^$', PostListAPIView.as_view(), name='list'), 
    url(r'^create/$', PostCreateAPIView.as_view(), name='create'), 
    #url(r'^create/$', post_create), 
    url(r'^(?P<slug>[\w-]+)/$', PostDetailAPIView.as_view(), name='detail'), 
    url(r'^(?P<slug>[\w-]+)/edit/$', PostUpdateAPIView.as_view(), name='update'), 
    url(r'^(?P<slug>[\w-]+)/delete/$', PostDetailAPIView.as_view(), name='delete'), 

    #url(r'^(?P<slug>[\w-]+)/edit/$', post_update, name ='update'), 
    #url(r'^(?P<slug>[\w-]+)/delete/$', post_delete), 
    #url(r'^posts/$', "<appname>.views.<function_name>"), 



    url(r'^$', PostListView.as_view(), name='list2') 
]

serializers.py

 from rest_framework.serializers import ModelSerializer, HyperlinkedIdentityField 

    from posts.models import Post 


    class PostCreateUpdateSerializer(ModelSerializer): 
     class Meta: 
      model = Post 
      fields = [ 
       #'id', 
       'title', 
       #'slug', 
       'content', 
       'publish' 
      ] 


    class PostDetailSerializer(ModelSerializer): 
     class Meta: 
      model = Post 
      fields = [ 
       'id', 
       'title', 
       'slug', 
       'content', 
       'publish' 
       ] 


    class PostListSerializer(ModelSerializer): 
     url = HyperlinkedIdentityField(
     view_name='posts-api:detail', 
     lookup_field='slug' 
     ) 
     delete_url = HyperlinkedIdentityField(
     view_name='posts-api:delete', 
     lookup_field='slug' 
     ) 
     class Meta: 
      model = Post 
      fields = [ 
       'url', 
       'id', 
       'title', 
       'content', 
       'publish', 
       'delete_url' 
      ] 



    from rest_framework import serializers 

    class PinSerializer(serializers.ModelSerializer): 
     class Meta: 
      model = Post

views.py

from rest_framework.generics import CreateAPIView, ListAPIView, RetrieveAPIView, UpdateAPIView, DestroyAPIView 

from posts.models import Post 
from .serializers import PostCreateUpdateSerializer, PostListSerializer, PostDetailSerializer 

from rest_framework.pagination import LimitOffsetPagination, PageNumberPagination 
from .pagination import PostLimitOffsetPagination, PostPageNumberPagination 

class PostCreateAPIView(CreateAPIView): 
    queryset = Post.objects.all() 
    serializer_class = PostCreateUpdateSerializer 

class PostDetailAPIView(RetrieveAPIView): 
    queryset = Post.objects.all() 
    serializer_class = PostDetailSerializer 
    lookup_field = 'slug' 

class PostUpdateAPIView(UpdateAPIView): 
    queryset = Post.objects.all() 
    serializer_class = PostCreateUpdateSerializer 
    lookup_field = 'slug' 

class PostDeleteAPIView(DestroyAPIView): 
    queryset = Post.objects.all() 
    serializer_class = PostDetailSerializer 
    lookup_field = 'slug' 

class PostListAPIView(ListAPIView): 
    queryset = Post.objects.all() 
    serializer_class = PostListSerializer 
# pagination_class = PostLimitOffsetPagination 

from rest_framework import generics 
from rest_framework import filters 
from rest_framework.pagination import LimitOffsetPagination 


from .serializers import PostListSerializer 

class PostListView(generics.ListAPIView): 
    queryset = Post.objects.all() 
    serializer_class = PostListSerializer 
    filter_backends = (filters.DjangoFilterBackend,) 
    filter_fields = ('category',) 
    pagination_class = LimitOffsetPagination

谢谢。

直播网站是在这里：http://192.241.153.25:8000/

来源

2016-07-26 Mark

我有一种感觉，你没有正确加载模块。你能粘贴你在控制台中看到的完整错误吗？ –

'{{variable}}'是一个django模板构造......所以角度看不到它......我想你可以使用像三角形这样的库来在你的django模板中放置角度指令 –

@AminMeyghani现场网站：http： //192.241.153.25:8000/ – Mark

你的第一个错误是我在评论中引用的缺失的清理模块。添加缺失包括：

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>

将解决该问题。

您当前的错误实际上是一个新问题，但与您的索引页面（渲染索引页面的第498行）中的这段代码有关。

$http.get(this.url).success(function(data) { 
    var items = data.results; 
    for (var i = 0; i < items.length; i++) { 
     this.items.push(items[i]); 
} 
...

你的代码被返回看起来像这样的数据对象：

 
    [ { 
     "url":"http://192.241.153.25:8000/api/posts/test-2/", 
     "id":3, 
     "title":"test", 
     "content":"test", 
     "publish":"2016-01-01", 
     "delete_url":"http://192.241.153.25:8000/api/posts/test-2/delete/" 
    }, 
    ... 
    ]

它不会有一个结果属性。我真的不看看你用它在做什么，但你可能想这（注意缺少的“成果”）：

$http.get(this.url).success(function(data) { 
    var items = data; 
    for (var i = 0; i < items.length; i++) { 
     this.items.push(items[i]); 
} 
...

或者你想改变了你什么返回，以便它有一个结果属性。

来源

2016-07-26 04:18:16 clockwatcher

使用'.success'方法已被弃用。您可能想更新以包含现代的'.then（funtion（...））'符号。 –

谢谢@clockwatcher。它的工作原理。但是你碰巧知道为什么数据呈现为{{post.title}}而不是真正的标题？我检查了控制台，数据显示没问题，只是看起来问题很严重，而且无限滚动本身似乎不起作用，它只显示初始项目，并且不响应我的鼠标，也没有获得额外的这些都是我的代码：https：//gist.github.com/cityproject/52f11458bfc090be08e5e683d137a2c9我知道它完全是最后的分钟，但你可以看看它吗？我很想开始一个新的问题，但即时封锁目前：第 – Mark

<div ng-app="myApp" class="app"> 
    <div ng-controller="appCtrl as vm" class="main-container"> 
     <h1>Post List</h1> 
     {% verbatim %} 
     <div ng-repeat="post in vm.posts | limitTo: 10" class="post"> 
     <a href="{{ post.url}}"> 
      <h2>{{ post.title }}</h2> <!-- this is django template language and expects a django context variable named post that has an attribute of title --> 
      <p>{{ post.content }}</p> 
     </a> 
      <p ng-if="vm.loadingPosts">Loading...</p> 
     </div> 
     {% endverbatim %} 
    </div> 
    </div>

而必须逃避你的{{和}}的角度看他们

{% templatetag openvariable %} angular_variable {% templatetag closevariable %}

或使用类似https://github.com/jrief/django-angular

来源

2016-07-26 03:04:02

角js无限滚动django休息框架

回答

相关问题