javascript - 链接函数和 Controller 函数如何共享 Angular Directive(指令)中的知识？

Question

我有一个显示付款历史记录的 Angular Directive(指令)。默认情况下，它使用 vm.numberOfPaymentsToDisplay 变量显示最近 6 笔付款。如果您单击“查看更多”，则会增加 10。现在，当用户单击另一个部分时，链接函数中有一个监听器应该将数字重置为 6，但是 vm 未定义。

代码如下:

angular.module('nui.settings2.account')
 .directive('paymentHistory', function(){

 function PaymentHistoryController(paymentHistoryService, $filter, $window, $translate){

  const filter = $filter('formatCurrency');

  var vm = this;
  vm.payments = paymentHistoryService.get();
  vm.numberOfPaymentsToDisplay = 6;
  vm.getLastPayment = getLastPayment;
  vm.viewMorePayments = viewMorePayments;
  vm.title = $translate.instant('NUI.SETTINGS.PAYMENT_HISTORY');


  function getLastPayment(){
    const lastTransaction = paymentHistoryService.getLastPayment();
    return lastPaymentInfo = "amount (date)";
  }

  function viewMorePayments(){
    vm.numberOfPaymentsToDisplay = vm.numberOfPaymentsToDisplay + 10;
    return true;
  }
}

function link(scope, element, attrs, [expander, paymentHistory]){
  const containerEl = element.children();
  expander.registerContentContainer(containerEl);
  scope.$on(expander.COLLAPSE_EVENT, () => vm.numberOfPaymentsToDisplay = 6);
  scope.$on("$destroy", () => scope.$emit(expander.CONTAINER_DEREGISTER_EVENT));
  paymentHistory.cancel = () => expander.collapse();
}

return {
  restrict: 'E',
  templateUrl: 'nui/settings2/account/billing/payment-history.directive.html',
  controller: PaymentHistoryController,
  link: link,
  require: ['^^settingExpander', 'paymentHistory'],
  controllerAs: 'PaymentHistoryCtrl',
  bindToController: true
};
});

如何在链接函数中设置 vm.numberOfPaymentsToDisplay = 6，即使此知识只有 Controller 知道？

Answer 1

当您将 PaymentHistoryController 注入(inject)链接函数时，您可以向 PaymentHistoryController 添加一个方法，例如 setNumberOfPaymentsToDisplay，您可以像这样调用该方法:

paymentHistory.setNumberOfPaymentsToDisplay(6);

Controller 代码:

function PaymentHistoryController(paymentHistoryService, $filter, $window, $translate){

  const filter = $filter('formatCurrency');

  var vm = this;
  vm.payments = paymentHistoryService.get();
  vm.numberOfPaymentsToDisplay = 6;
  vm.getLastPayment = getLastPayment;
  vm.viewMorePayments = viewMorePayments;
  vm.setNumberOfPaymentsToDisplay = setNumberOfPaymentsToDisplay;
  vm.title = $translate.instant('NUI.SETTINGS.PAYMENT_HISTORY');


  function getLastPayment(){
    const lastTransaction = paymentHistoryService.getLastPayment();
    return lastPaymentInfo = "amount (date)";
  }

  function viewMorePayments(){
    vm.numberOfPaymentsToDisplay = vm.numberOfPaymentsToDisplay + 10;
    return true;
  }

  function setNumberOfPaymentsToDisplay(amount) {
     vm.numberOfPaymentsToDisplay = amount;
  }
}

链接代码:

function link(scope, element, attrs, [expander, paymentHistory]){
  const containerEl = element.children();
  expander.registerContentContainer(containerEl);
  scope.$on(expander.COLLAPSE_EVENT, () => paymentHistory.setNumberOfPaymentsToDisplay(6));
  scope.$on("$destroy", () => scope.$emit(expander.CONTAINER_DEREGISTER_EVENT));
  paymentHistory.cancel = () => expander.collapse();
}