指令可与其他指令沟通

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> 

其中CA-订单细节开始用数据填充，但是当CA阶动作按钮触发事件需要刷新。

动作按钮将被加载许多doAction（它是一个按钮下拉多动作），并且会有一些不同的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(); 
    }); 
}]);