指示文の属性変更アレイとしてのAngularJS指示文

Question

私はこの指示文を持っています。リンクよりも上にスクロールすると、関数が呼び出されます。 リンク機能では、配列の4つのエントリをスプライスしますが、これはビューの影響を受けません - 表示されている配列のエントリ全体が残ります。 したがって私の質問は、スプライス配列をブラウザビューから削除するためにできることでしょうか？

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

Answer 1

あなたはディレクティブからバインドされた変数を変更すると、あなたはそれを更新する必要がある角度に通知する必要があります。

(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); 
      } 
     }); 
     } 
    } 
})(); 

ディレクティブの使用法は、このようなものです。 $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ウェイ結合性であるスコープ変数を割り当てるときに、それは同じ名前だ場合、あなたは=後に変数名を必要としないことに注意してください。