Как вызвать событие в одном представлении с другого вида?

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

Другой soltuion является использование общей службы. В этом случае я бы создал 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); 

The this в фрагменте кода выше, отсылая к контроллеру аккордеона. Это важно, потому что если вы затем получите аккордеон в своем компоненте в body.html, вы получите экземпляр контроллера и сможете вызывать методы вроде open.

Таким образом, в компоненте тела вы можете вводить AccordionService и получить гармонь вызвать метод:

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

Убедитесь определить open на контроллере Аккордеон в.