Как сделать угловую директиву, которая вызывает функцию в конкретном контроллере

Question

Изображения продуктов появляются на многих страницах моего приложения, и я хотел бы разработать директиву, чтобы показать Модаль, когда посетитель нажимает любое изображение продукта, независимо от того, где он находится в моем приложении.

У меня есть контроллер Root, охватывающий всю моя страницу из моего приложения ...

<section class="container" ng-controller="RootController"> 
    // Header 
    // Body 
    // Footer 
</section> 

Я хотел бы поставить showProductModal() функции в моем RootController и вызвать его в моей директиве.

Наконец, я хотел бы передать в объекте парах в функцию showProductModal(product) так, что я могу использовать его в другом месте в пределах моего RootController ...

Вот что я начал с того, что просто какой-то код стартера ...

// HTML 
<img src="path/to/product/image.jpg" product> 

// Directive - Product Modal 
app.directive("product", function() { 
    return { 
     restrict: "A", 
     replace: true, 
     controller: 'RootController', 
     link: function(){ 

     }; 
    }; 
}); 

// Root Controller 
angular.module('app').controller('RootController', ['$scope', function ($scope) { 

$scope.showProductPopup = function(item) { 
     $scope.product = item; 
     $('#productModal').modal('show'); 
    }; 

}]); 

Answer 1

Я хотел бы предложить вам транслировать событие rootScope из вашей директивы и добавить слушателя к контроллеру, который вызывает модальность, что-то вроде:

//directive 
controller: function($scope, $rootScope){ 
    $scope.onClick = function(){ 
     $rootScope.$broadcast('openModal', someObjectToPopulateModal); 
    } 
} 

//main controller 
$scope.$on('openModal', function(e, someObjectToPopulateModal){ 
    //do something with the object you sent from the directive 
    //and trigger the function that opens your modal 
});