如何在angularjs中将一个类从一个指令应用到另一个指令？

Question

如何在不使用jQuery选择器的情况下将toggleClass指令中的类添加到Header指令？我不确定如何在AngularJS中执行此操作，是否需要在此情况下进行指令通信？

<Header></Header>

<toggleClass></toggleClass>

在toggleClass指令中我有：

module.exports = Directive;
function Directive(){
  return {
    restrict: 'E',
    templateUrl: '/directive.html',
    link : function(scope, element){
          scope.expandToggle = function() {
            // add class to Header directive
          } 
    }
  }
};

及其模板：

<div ng-click="expandToggle()">
  <span class="collapseText">Collapse</span>
  <span class="expandText">Expand</span>
</div>

Answer 1

1＆＃39;方式：使用$ emit

您可以$emit从toggleClass指令到父控制器的事件，并更改布尔值以控制添加/删除您的类。

ToggleClass指令：

module.exports = Directive;
function Directive(){
  return {
    restrict: 'E',
    templateUrl: '/vic-compare-quotes-expand/templates/directive.html',
    link : function(scope, element){
          scope.expandToggle = function() {
            scope.$emit('toggle');
          } 
    }
  }
};

家长控制器：

angular
  .module('yourModule')
  .controller('YourController', ['$scope', YourController]);

function YourController($scope) {
  $scope.$on('toggle', function() {
    $scope.apllyNeededClass = true;
  })
}

您的HTML：

<Header ng-class="{'classToApply': apllyNeededClass}"></Header>

<toggleClass></toggleClass>

2＆＃39;方式：使用服务

您可以使用服务在控制器之间共享数据（在您的情况下为指令和控制器）。

ToggleClass指令：

module.exports = Directive;
function Directive(){
  return {
    restrict: 'E',
    templateUrl: '/vic-compare-quotes-expand/templates/directive.html',
    link : function(scope, element){
          scope.expandToggle = function() {
            yourService.apllyNeededClass = true;
            // don't forget to inject "yourService" in this directive
          } 
    }
  }
};

家长控制器：

angular
  .module('yourModule')
  .controller('YourController', ['$scope', 'yourService', YourController]);

function YourController($scope, yourService) {     
  $scope.apllyNeededClass = yourService.apllyNeededClass;
  // bind service variable to your $scope variable
}

您的HTML：

<Header ng-class="{'classToApply': apllyNeededClass}"></Header>

<toggleClass></toggleClass>

P.S。

我在ng-class标记上使用<Header>仅作为示例，因为我不知道您的Header指令的模板。