Директивы, которые могут взаимодействовать с другими директивами

Question

У меня возникли проблемы, выяснить, как есть одна директива инициировать событие в другой директиве

Скажем, у меня есть следующие 2 директивы

project.directive('ActionButton', function() { 
return { 
    restrict: 'E', 
    scope: { 
     orderId: '@' 
    }, 
    templateUrl: '/scripts/templates/directive-templates/order-action-button.html', 
    link: function (scope, element, attrs) { 
     scope.doAction = function() { 
      // I want to trigger 'scope.refreshOrderDetails' in my other directive from here 
     } 
    } 
} 

project.directive('OrderView', function() { 
return { 
    restrict: 'E', 
    scope: { 
     orderId: '@' 
    }, 
    templateUrl: '/scripts/templates/directive-templates/order-view.html', 
    link: function (scope, element, attrs) { 
     scope.refreshOrderDetails = function() { 
      // data is refreshed here 
     } 
    } 
} 

И я использую мои директивы как этот

<ca-action-button order-id="{{orderId}}"></ca-order-action-button> 

<ca-order-view order-id="{{orderId}}"></ca-order-details> 

Где ч порядок-деталь, первоначально заполняется данными, но нуждается в обновлении, когда событие ч порядка действие кнопки обжигают.

Кнопка действия будет загружена многими doActions (это выпадающее меню с несколькими действиями), и там будут несколько разных директив типа OrderView, каждый из которых имеет собственный набор данных, нуждающихся в обновлении на разных триггерах

Answer 1

Вы можете сделать это путем вещания и прослушивания для событий:

ca-order-action-button В:

$rootScope.$broadcast('event', { id: 12345 }); 

ca-order-details В:

$scope.$on('event', function (event, data) { console.log(data.id); }); 

Answer 2

Вы ошибаетесь. Функция ссылок директив должна использоваться только для выполнения преобразований DOM. Я хотел бы использовать контроллеры и $ rootScope для событий.

project.directive('ActionButton', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     orderId: '@' 
    }, 
    templateUrl: '/scripts/templates/directive-templates/order-action-button.html', 
    controller: 'ActionButtonCtrl' 
    }; 
}); 

project.directive('OrderView', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      orderId: '@' 
     }, 
     templateUrl: '/scripts/templates/directive-templates/order-view.html', 
     controller: 'OrderViewCtrl' 
    } 
}); 

project.controller('ActionButtonCtrl', 
['$scope', '$rootScope', function($scope, $rootScope) { 
    $scope.doAction = function() { 
    $rooScope.$emit('refreshOrder', $scope.orderId); 
    }; 
}]); 

project.controller('OrderViewCtrl', 
['$scope', '$rootScope', function($scope, $rootScope) { 
    var deregFn = $rootScope.$on('refreshOrder', function(orderId) { 
    // refresh order details here 
    }); 

    // Once scope is destroyed - cleanup 
    $scope.$on('$destroy', function() { 
    deregfn(); 
    }); 
}]);