지시어의 속성 변경 어레이로 AngularJS 지시문

Question

이 지시문을 가지고 있으며 링크 기능보다 위쪽으로 스크롤하면 함수가 호출됩니다. 링크 기능에서 배열의 4 개 항목을 연결할 것입니다. 그러나보기의 영향은 없습니다. 배열의 전체 항목이 여전히 표시됩니다. 따라서 내 질문에 내가 할 수있는 splices arrayentries 브라우저보기에서 제거하려면 무엇입니까?

(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> 

Answer 1

, 당신은 그것을 업데이트 할 필요가 각도 알려야합니다. $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 웨이 바인딩 된 범위 변수를 할당 할 때 같은 이름의 경우, 당신은 = 후 변수 이름을 필요는 없습니다.