Question

我有这个指令，如果我滚动到顶部而不是链接函数将被调用 - 这很好。在链接函数中，我将拼接数组的4个条目 - 但这不受视图的影响 - 仍然显示数组的整个条目。因此，我的问题是如何从浏览器视图中删除拼接数组条目？

(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

从指令修改绑定变量时，需要通知需要更新的angular。您可以使用$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();
          }
        });
      }
    }
})();

另请注意，当您为指令指定一个双向绑定的作用域变量时，如果它是相同的名称，则不需要=之后的变量名称。

AngularJS指令作为属性 - 在指令中更改数组

1 个答案: