AngularJS directive as attribute - make array available in directive

Question

I have this html fragment with my directive asScrollTop as attribute:

<div data-as-scroll-top>
    <div data-ng-repeat="chatMessageOfUser in vm.chatMessagesOfUser">
    <!-- use chatMessageOfUser -->
    </div>
</div>

and this is my directive:

(function() {
'use strict';

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

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

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

    function link(scope, element, attr) {
        console.log(element);
        element.on('scroll', function() {
          if(element[0].scrollTop <= 0) {
              // here I need vm.chatMessagesOfUser or the first entry of the 
              // vm.chatMessagesOfUser array              
  }
        });
      }
}
})();

My question now would be how I can make the the vm.chatMessagesOfUser array available in directive?

Jasmin Kurtic · Accepted Answer · 2016-08-14 08:09:18Z

1

You can defined scope in directive like

var directive = {
        restrict: 'A',
        scope: { yourList: '=yourList' },
        link: link
    };
    return directive;

function link(scope, element, attr) {
    console.log(scope.yourList);
    };

and set value in html markup

<div data-as-scroll-top your-list="vm.chatMessagesOfUser"></div>

edited Aug 14, 2016 at 8:09

answered Aug 14, 2016 at 7:40

Jasmin Kurtic

14112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

georgeawg · Accepted Answer · 2016-08-14 12:08:10Z

Since your attribute directive uses the existing scope, the variables are on that scope.

function link(scope, element, attr) {
    console.log(element);
    element.on('scroll', function() {
      if(element[0].scrollTop <= 0) {
          // here I need vm.chatMessagesOfUser
          console.log(scope.vm.chatMessaagesOfUser);
          // or the first entry of the 
          // vm.chatMessagesOfUser array 
          console.log(scope.vm.chatMessangerOfUser[0]);             
      }
    });
}

Collectives™ on Stack Overflow

AngularJS directive as attribute - make array available in directive

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related