我一直在这里学习无限滚动的教程。
http://en.proft.me/2015/09/4/how-make-infinity-scroll-loading-bar-angularjs/
但出于某种原因，它给我带来了这个错误
＆＃34; angular.js：38未捕获错误：[$ injector：modulerr＆＃34;
我在这里做错了吗？我是django rest framework和angular 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/
答案 0 :(得分：1)
您的第一个错误是我在评论中引用的缺少的清理模块。添加缺失的内容包括：
<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/"
},
...
]
它没有结果属性。我没有真正研究你用它做了什么，但你可能想要这个（注意缺少＆＃34;结果＆＃34;）：
$http.get(this.url).success(function(data) {
var items = data;
for (var i = 0; i < items.length; i++) {
this.items.push(items[i]);
}
...
或者您想要更改您返回的内容，以便它具有结果属性。
答案 1 :(得分：0)
<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 %}