AngularJS directive as attribute - change array in directive

Question

I have this directive and if I scroll to top than the link function will be invoked - this works fine. In the link function I will splice 4 entries of the array - but this is no influence of the view - there are still the whole entries of the array shown. Therefore my question would be what I can do in order to remove the splices arrayentries from the browser view?

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

The usage of the directive is like this:

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

I made a Plnkr with your problem but I realized (plnkr.co/edit/fc2it2ZN7Bjxs9EJRJB1) I don't know what you are trying to do. When does your ng-repeat go? Are you trying to splice the list when the user starts scrolling on the list container? If so, what is the purpose of that? — mcranston18
– mcranston18, Commented Aug 14, 2016 at 14:31
ng-repeat shows the list in the browser-view and if user scroll at top than some items in the array should be deleted. So the item shoud not be deleted before ng-repeat. Thanks a lot — quma
– quma, Commented Aug 14, 2016 at 14:37
can you edit the plnkr above so the html in the plnkr matches the html of your app? I'm still not clear where you are iterating on your list. — mcranston18
– mcranston18, Commented Aug 14, 2016 at 14:43
plnkr.co/edit/rvRPhWM6AwnMS0Q4Tqsd?p=preview - I have edit the directive - element.on('scroll'.. is invoked if user scrolls to top but the elements 1-4 are still shown in html at the right side, and that is my problem. Thanks a lot! — quma
– quma, Commented Aug 14, 2016 at 14:47

Todd Miller · Accepted Answer · 2016-08-14 15:24:11Z

When you modify a bound variable from a directive, you need to inform angular it needs to update. You can do this with $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();
          }
        });
      }
    }
})();

Also note that when you assign a directive a scope variable that is 2-way bound, you don't need the variable name after the = if it's the same name.

Collectives™ on Stack Overflow

AngularJS directive as attribute - change array in directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related