Angular Binding funktioniert nicht richtig mit ngInfiniteScroll

Question

Grundsätzlich habe ich eine Timeline mit Posts, die ein $ FirebaseArray ist und jede Änderung an diesem Array wird richtig gebunden. Aber wenn ich andere Daten binden will, bindet es nur, wenn ngInfiniteScroll versucht, mehr Daten vom Firebase zu holen, also nur wenn ich runterscrolle.

Im folgenden Code rufe ich {{getMoreDetails()}} an und diese Daten werden gebunden, wenn der erste Datensatz mit ngInfiniteScroll abgerufen wird, aber sobald er geladen wird, bricht die Bindung und bindet erst wieder beim Scrollen.

Meine Bedenken sind hier:

• War ngInfiniteScroll entwickelt, um diese Art und Weise zu arbeiten?
• Gibt es in diesem Szenario eine Problemumgehung?

---

Stack:

"firebase": "2.4.2","angularfire": "~1.2.0","firebase-util": "0.2.5","ngInfiniteScroll": "1.2.2" 

timeline.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> 

timeline.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); 

Answer 1

Ich gehe davon aus, dass Sie die Postdetails aktualisiert, wenn die Daten aus Ihrem Firebase ändert.

Wenn Firebase-Änderungen auf Ihren Bereich angewendet werden, scheint es, dass es keinen Digest-Zyklus auslöst. Daher müssen Sie es wahrscheinlich jedes Mal manuell durchführen, wenn Sie Updates von Firebase erhalten.

Werfen Sie einen Blick auf $$updated in $firebaseArray.$extend (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); 
    } 
    }); 
}); 

Ich hoffe, das hilft.