首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >角绑定不能与ngInfiniteScroll正常工作

角绑定不能与ngInfiniteScroll正常工作
EN

Stack Overflow用户
提问于 2016-05-29 14:37:59
回答 1查看 396关注 0票数 4

基本上,我有一个带有posts的时间线,这是一个$firebaseArray,对这个数组的任何更改都是正确绑定的。但是,当我想绑定任何其他数据时,它只在ngInfiniteScroll试图从火基检索更多数据时才绑定,所以只有当我向下滚动时才会绑定。

在下面的代码中,我调用{{getMoreDetails()}},当使用ngInfiniteScroll检索第一组数据时,该数据被绑定,但一旦加载,绑定就中断,只有在滚动时才会再次绑定。

我在此所关切的是:

  • ngInfiniteScroll是这样设计的吗?
  • 在这种情况下有什么解决办法吗?

堆叠:

代码语言:javascript
复制
"firebase": "2.4.2","angularfire": "~1.2.0","firebase-util": "0.2.5","ngInfiniteScroll": "1.2.2"

timeline.html

代码语言:javascript
复制
<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

代码语言:javascript
复制
(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

代码语言:javascript
复制
 (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);
EN

回答 1

Stack Overflow用户

发布于 2016-06-03 13:59:00

我假设您希望在Firebase的数据发生变化时更新post详细信息。

当将Firebase更改应用到您的作用域时,它似乎不会触发摘要周期,因此每次从Firebase获得更新时,您可能都需要手动执行。

看看$$updated in $firebaseArray.$extend (见文档)。

//现在让我们创建一个同步数组工厂,它使用我们的Widget app.factory("WidgetFactory",function($firebaseArray,Widget) ){返回$firebaseArray.$extend({ //重写调用Widget.update() $$updated: function(snap) { //我们需要在这里返回true/false )的更新行为,否则$watch侦听器不会被触发//幸运地,我们的Widget.prototype.update()方法已经返回一个布尔值if //任何已更改的内容,返回这个.$getRecord(snap.key()).update(Snap);});

我希望这能帮到你。

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

https://stackoverflow.com/questions/37511169

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档