作为属性的AngularJS指令 - 在指令中更改数组

我有这个指令，如果我滚动到顶部的链接功能将被调用 - 这工作正常。在链接函数中，我将拼接数组的4个条目 - 但这不影响视图 - 仍然显示数组的所有条目。因此，我的问题将是我可以做什么，以从浏览器视图中删除拼接阵列条目？作为属性的AngularJS指令 - 在指令中更改数组

(function() { 
'use strict'; 

angular 
    .module('myProject.common') 
    .directive('asScrollTop', asScrollTop); 

function asScrollTop() { 
    var directive = { 
     restrict: 'A', 
     scope: { chatMessagesOfUser: '=chatMessagesOfUser' }, 
     link: link 
    }; 
    return directive; 

    //////////// 

    function link(scope, element, attr) { 
     console.log(element); 
     element.on('scroll', function() { 
      if(element[0].scrollTop <= 0) { 
       scope.chatMessagesOfUser.splice(1, 4); 
      } 
     }); 
     } 
    } 
})();

该指令的用法是这样的：

<div data-as-scroll-top data-chat-messages-of-user="vm.chatMessagesOfUser"> 
</div>

来源

2016-08-14 quma

我做了一个Plnkr与你的问题，但我意识到（http://plnkr.co/edit/fc2it2ZN7Bjxs9EJRJB1）我不知道你在做什么。你的ng-repeat何时去？你想在用户开始在列表容器上滚动时拼接列表吗？如果是这样，那么目的是什么？ – mcranston18

ng-repeat在浏览器视图中显示列表，并且如果用户在顶部滚动，则应删除数组中的某些项目。所以该项目不应该在ng-repeat前被删除。非常感谢 – quma

您是否可以编辑上面的plnkr，以便plnkr中的html与您的应用程序的html匹配？我仍然不清楚你在列表中迭代的位置。 – mcranston18

当您从指令修改绑定变量，您需要通知的角度，它需要更新。你可以用$apply()来做到这一点。

(function() { 
'use strict'; 

angular 
    .module('myProject.common') 
    .directive('asScrollTop', asScrollTop); 

function asScrollTop() { 
    var directive = { 
     restrict: 'A', 
     scope: { chatMessagesOfUser: '=' }, 
     link: link 
    }; 
    return directive; 

    //////////// 

    function link(scope, element, attr) { 
     console.log(element); 
     element.on('scroll', function() { 
      if(element[0].scrollTop <= 0) { 
       scope.chatMessagesOfUser.splice(1, 4); 
       scope.$apply(); 
      } 
     }); 
     } 
    } 
})();

还要注意的是，当你分配一个指令一个范围变量，它是2路的约束，你不要在=后需要在变量名，如果是相同的名称。

来源

2016-08-14 15:24:11

非常感谢答案 – quma

作为属性的AngularJS指令 - 在指令中更改数组

回答

相关问题