基本上,我有一个包含 $firebaseArray 帖子的时间线,并且对此数组的任何更改都会正确绑定(bind)。但是,当我想绑定(bind)任何其他数据时,它仅在 ngInfiniteScroll 尝试从 firebase 检索更多数据时绑定(bind),因此仅当我向下滚动时才绑定(bind)。
在下面的代码中,我调用 {{getMoreDetails()}}
并且当使用 ngInfiniteScroll 检索第一组数据时绑定(bind)此数据,但一旦加载绑定(bind)就会绑定(bind)中断并仅在滚动时再次绑定(bind)。
我的担忧是:
- ngInfiniteScroll 是设计成这样工作的吗?
- 这种情况下有解决办法吗?
堆栈:
"firebase": "2.4.2","angularfire": "~1.2.0","firebase-util": "0.2.5","ngInfiniteScroll": "1.2.2"
时间线.html
<div ng-controller="TimelineController">
<section class="entrys main-content" infinite-scroll="posts.scroll.next(3)" infinite-scroll-distance="0.3">
<div class="inner">
<div ng-repeat="post in filteredPostsResults = (posts | filter:postIdFilter)">
<article class="entry">
<img ng-if="post.sourceType=='IMAGE'" data-ng-src="{{getPostData(post)}}"/>
<div class="entry-info">
<h3><div ng-bind-html="post.description | emoticons"></div></h3>
<small>posted on <time>{{getDateInFormat(post.createdAt)}}</time></small>
{{getMoreDetails()}}
</div>
</article>
</div>
</div>
</section>
</div>
时间线.js
(function (angular) {
"use strict";
var timeline = angular.module('myApp.user.timeline', ['firebase', 'firebase.utils', 'firebase.auth', 'ngRoute', 'myApp.user.timelineService']);
timeline.controller('TimelineController', [ '$scope', '$routeParams', 'TimelineService', '$publisherServices', '$securityProperties', function ($scope, $routeParams, TimelineService, $publisherServices, $securityProperties) {
if (!$scope.posts){
$scope.posts = TimelineService.getPosts($routeParams.userId);
}
$scope.posts.$loaded(function(result) {
$scope.isPostsLoaded = true;
});
$scope.getMoreDetails = function() {
console.log("LOGGED ONLY WHEN SCROLLING");
return $publisherServices.getDetails();
};
$scope.getPostData = function(post) {
if (!post.dataUrl){
post.dataUrl = $publisherServices.getAwsFileUrl(post.fileName);
}
return post.dataUrl;
};
$scope.postIdFilter = function(post) {
if ($routeParams.postId){
if (post.$id == $routeParams.postId) return post;
} else { return post; }
};
$scope.getDateInFormat = function(timestamp){
var date = new Date();
date.setTime(timestamp);
return date;
};
}]);
})(angular);
timelineService.js
(function (angular) {
"use strict";
var timelineService = angular.module('myApp.user.timelineService', []);
timelineService.service('TimelineService', ['$routeParams', 'FBURL', '$firebaseArray', function ($routeParams, FBURL, $firebaseArray) {
var posts;
var currentUserIdPosts;
var postsRef;
var self = {
getPosts: function(userId){
if (!posts || userId != currentUserIdPosts){
currentUserIdPosts = userId;
postsRef = new Firebase(FBURL).child("posts").child(userId);
var scrollRef = new Firebase.util.Scroll(postsRef, "createdAtDesc");
posts = $firebaseArray(scrollRef);
posts.scroll = scrollRef.scroll;
}
return posts;
}
}
return self;
}]);
})(angular);
最佳答案
我假设您希望在 Firebase 中的数据发生变化时更新帖子详细信息。
当 Firebase 更改应用于您的范围时,它似乎不会触发摘要周期,因此您可能需要在每次从 Firebase 获取更新时手动执行此操作。
查看 $firebaseArray.$extend
中的 $$updated
( see docs )。
// now let's create a synchronized array factory that uses our Widget app.factory("WidgetFactory", function($firebaseArray, Widget) { return $firebaseArray.$extend({ // override the update behavior to call Widget.update() $$updated: function(snap) { // we need to return true/false here or $watch listeners will not get triggered // luckily, our Widget.prototype.update() method already returns a boolean if // anything has changed return this.$getRecord(snap.key()).update(snap); } }); });
我希望这会有所帮助。
关于angularjs - Angular 绑定(bind)无法与 ngInfiniteScroll 正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37511169/