Javascript 链接函数和控制器函数如何在角度指令中共享知识？

我有一个显示付款历史的角度指令。默认情况下，它使用

vm.numberOfPaymentsToDisplay

变量显示最近6次付款。如果单击“查看更多”，则会添加10。现在，当用户单击另一个部分时，link函数中有一个侦听器，该侦听器应该将数字重置为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，即使只有控制器知道此知识？

实际上，您有更多选项。 在组件之间共享数据的一般方法是使用一个服务，该服务是一个单实例，每次您在组件中使用它时，它都由angular缓存和注入。另一个有效的解决方案是发出事件

服务：

.service('MyService', function(){
 var data;
 this.setData = function(newData){
   data = newData;
 }
 this.getData = function(){
  return data;
 }
})

$rootScope.$broadcast('my.evt', data); //down in the scope chain, visible to any scope
$rootScope.$emit('my.evt', data); //up in the scope chain since is the rootscope only visible to rootScope

$scope.$emit //up in the scope chain
$scope.$broacast //down in the scope chain

事件：

.service('MyService', function(){
 var data;
 this.setData = function(newData){
   data = newData;
 }
 this.getData = function(){
  return data;
 }
})

$rootScope.$broadcast('my.evt', data); //down in the scope chain, visible to any scope
$rootScope.$emit('my.evt', data); //up in the scope chain since is the rootscope only visible to rootScope

$scope.$emit //up in the scope chain
$scope.$broacast //down in the scope chain

要收听事件，请执行以下操作：

$rootScope.$on('my.evt', function(evt, data){ //do something }

或

---

但是，在这种情况下，您使用link函数来修改业务逻辑，这不是传统的方法，通常链接仅用于处理dom事件和修改dom。因此，我个人的建议是重构代码并将整个业务逻辑放在控制器中

实际上，您有更多的选择。 在组件之间共享数据的一般方法是使用一个服务，该服务是一个单实例，每次您在组件中使用它时，它都由angular缓存和注入。另一个有效的解决方案是发出事件

服务：

.service('MyService', function(){
 var data;
 this.setData = function(newData){
   data = newData;
 }
 this.getData = function(){
  return data;
 }
})

$rootScope.$broadcast('my.evt', data); //down in the scope chain, visible to any scope
$rootScope.$emit('my.evt', data); //up in the scope chain since is the rootscope only visible to rootScope

$scope.$emit //up in the scope chain
$scope.$broacast //down in the scope chain

事件：

.service('MyService', function(){
 var data;
 this.setData = function(newData){
   data = newData;
 }
 this.getData = function(){
  return data;
 }
})

$rootScope.$broadcast('my.evt', data); //down in the scope chain, visible to any scope
$rootScope.$emit('my.evt', data); //up in the scope chain since is the rootscope only visible to rootScope

$scope.$emit //up in the scope chain
$scope.$broacast //down in the scope chain

要收听事件，请执行以下操作：

$rootScope.$on('my.evt', function(evt, data){ //do something }

或

---

但是，在这种情况下，您使用link函数来修改业务逻辑，这不是传统的方法，通常链接仅用于处理dom事件和修改dom。因此，我个人的建议是重构代码并将整个业务逻辑放在控制器中

您可以向PaymentHistoryController添加一个方法，如SetNumberOfPayments，当您将PaymentHistoryController注入链接函数时，您可以如下调用该方法：

paymentHistory.setNumberOfPaymentsToDisplay(6);

控制器代码：

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

链接代码：

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

---

您可以向PaymentHistoryController添加一个方法，如setNumberOfPaymentsToDisplay，当您将PaymentHistoryController注入链接函数时，您可以如下方式调用该方法：

paymentHistory.setNumberOfPaymentsToDisplay(6);

控制器代码：

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

链接代码：

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

---

您是说从链接fn发出一个事件，并在控制器中设置一个侦听器，然后修改业务逻辑吗？发出是否可以在链接和控制器之间进行通信？是的，$rootScope.$emit（）在这种情况下可以工作。但是，如果此变量在应用程序中全局使用，则最好将其包装在服务中。您是说从链接fn发出事件，并在控制器中设置一个侦听器，然后修改业务逻辑吗？发出是否可以在链接和控制器之间通信？是的，$rootScope.$emit（）在这种情况下可以工作。但如果这个变量在你的应用程序中被全局使用，那么最好将它包装在一个serviceawesome中，我想知道为什么我一直没有定义控制器。我应该用paymentHistory！事实上，等等，我仍然让SetNumberOfPayments显示为未定义。错误发生在链接代码中，您将6作为参数传递。抱歉，我忘记了一部分：我将编辑我的答案，vm.setNumberOfPaymentsToDisplay=setNumberOfPaymentsToDisplay；太棒了，我想知道为什么我一直没有定义控制器。我应该用paymentHistory！事实上，等等，我仍然让SetNumberOfPayments显示为未定义。错误发生在链接代码中，您将6作为参数传递。抱歉，我忘记了一部分：我将编辑我的答案，vm.setNumberOfPaymentsToDisplay=setNumberOfPaymentsToDisplay；