Question

我正试图通过点击header.html中的按钮在body.html中打开角度手风琴。基本上从一个完全不同的视图触发一个视图中的事件。有没有人知道如何在Angular中做到这一点？

Answer 1

您可以做的是使用事件让您的手风琴指令知道发生的事情或使用共享服务。考虑到性能，它不会产生巨大的差异，但只有当您使用$emit而不是$broadcast时，因为通过$emit触发的事件会影响您的范围层次结构$broadcast发送事件。同时确保在$rootScope上触发事件，以免事件再次冒泡。

因此，如果您想要使用事件，您可以在组件上使用$emit上的$rootScope触发事件，方法如下：

function openAccordion() {
    $rootScope.$emit('on-accordion-open', null);
}

然后，您可以在视图中使用此功能，例如在body.html。请记住，上面的函数是另一个指令/组件或控制器的一部分。

<button ng-click="vm.openAccordion()">Open Accordion</button>

另请注意，我假设您使用的是controllerAs语法（设置为vm）。

在您的手风琴指令中，您可以将听众连接到多个事件，例如on-accordion-open：

$rootScope.$on('on-accordion-open', function() {
    // Open the accordion
});

另一个解决方案是使用共享服务。在这种情况下，我会创建一个知道所有手风琴实例的AccordionServce。该服务可能如下所示：

angular.module('myApp').service('AccordionService', function() {
   var accordions = {};

   this.addAccordion = function(name, accordion) {
       accordions[name] = accordion;
   };

   this.removeAccordion = function(name) {
       delete accordions[name];
   };

   this.getAccordion = function(name) {
       return accordions[name];
   };
});

在您的手风琴控制器中，您可以将手风琴添加到AccordionService通过

accordionService.addAccordion('myAccordion', this);

上面代码段中的this指的是手风琴控制器。这很重要，因为如果你在body.html中的组件中获得手风琴，你将获得控制器实例并可以调用像open这样的方法。

因此，在您的身体组件中，您可以注入AccordionService并让手风琴调用方法：

accordionService.getAccordion('myAccordion').open();

确保在手风琴的控制器上定义open。

如何从一个不同的视图触发一个视图中的事件？

1 个答案: