可以与其他指令通信的指令

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-order-details 最初使用数据填充，但在触发 ca-order-action-button 事件时需要刷新。

操作按钮将加载许多 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

你错了。指令的 link 函数只能用于执行 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();
  });
}]);

可以与其他指令通信的指令

Directives that can communicate with other directives

angularjs

angularjs-directive