作爲屬性的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指令 - 在指令中更改數組

回答

相關問題