Question

我将这个html片段与我的指令 asScrollTop 作为属性：

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

这是我的指示：

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

我现在的问题是如何在指令中使用 vm.chatMessagesOfUser 数组？

Answer 1

您可以在指令中定义范围，例如

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

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

并在html标记中设置值

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

Answer 2

由于您的属性指令使用现有范围，因此变量位于该范围内。

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

AngularJS指令作为属性 - make数组在指令中可用

2 个答案: