如何在组件 DOM 节点上切换类答案

【问题标题】：How to toggle a class on the component-DOM-node如何在组件 DOM 节点上切换类
【发布时间】：2016-11-26 13:18:11
【问题描述】：

我目前正在将一些旧指令重写为新的组件语法。我的指令之一需要在 DOMnode 上切换一个类。

<my-directive ng-class="$ctrl.getClassList()">
    <!-- DIRECTIVE CONTENT -->
</my-directive>

现在，当我将其转换为组件时，此功能不再起作用。是否有一些我没有找到的新功能？或者这根本不可能？

<my-component ng-class="$ctrl.getClassList()">
    <!-- COMPONENT CONTENT -->
</my-component>

感谢您抽出宝贵时间！

要查看完全正常工作（或更好，不工作）的示例，您可以查看此 sn-p，或前往 Plunkr

(function(angular) {
  angular.module('plunker', []);
})(angular);

// DIRECTIVE
(function(angular) {
  angular
    .module('plunker')
    .controller('MyDirectiveController', [function() {
      this.cssClass = '';
      this.toggle = function() {
        this.cssClass = (this.cssClass === '') ? 'active' : '';
      }
    }])
    .directive('myDirective', [function() {
      return {
        scope: true,
        restrict: 'E',
        controller: 'MyDirectiveController',
        controllerAs: '$ctrl',
        template: '<button ng-class="$ctrl.cssClass" ng-click="$ctrl.toggle()">hit me baby one more time</button>'
      };
    }]);
})(angular);

// COMPONENT
(function(angular) {
  angular
    .module('plunker')
    .controller('MyComponentController', [function() {
      this.cssClass = '';
      this.toggle = function() {
        this.cssClass = (this.cssClass === '') ? 'active' : '';
      }
    }])
    .component('myComponent', {
        controller: 'MyComponentController',
        template: '<button ng-class="$ctrl.cssClass" ng-click="$ctrl.toggle()">Do it again</button>'
    });
})(angular);

my-directive, 
my-component {
  display: block;  
  padding: 1em;
  border: 1px solid transparent;
  
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0;  
}

my-directive.active,
my-component.active {
    padding: 1em;
    font-size: 2em;
    background: red;
    color: white;
    border-color: darkred;
    
    border-width: 2px;
}
my-directive.active button,
my-component.active button {
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0;
  border: 1px solid;

  font-size: inherit;
  color: inherit;
  border-color: inherit;
  background: inherit;
}

button.active {
  text-decoration: underline;
}

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.7/angular.js" data-semver="1.5.7"></script>
  </head>

  <body>
    <my-directive ng-class="$ctrl.cssClass"></my-directive>
    <my-component ng-class="$ctrl.cssClass"></my-component>
  </body>

</html>

【问题讨论】：

标签： javascript angularjs angularjs-directive angularjs-components

【解决方案1】：

创建组件与创建具有隔离范围的指令 (What is the difference between scope:{} and scope:true inside directive?) 相同。如果您在 {} 范围内更改指令，您会发现它也不起作用。

.active 类只设置在按钮上，而不设置在组件 html 标记上。

我改变了你的 plunker 来展示这个问题：

// COMPONENT
(function(angular) {
  angular
    .module('plunker')
    .controller('MyComponentController', [function() {
      this.cssClass = '';
      this.toggle = function() {
        this.cssClass = (this.cssClass === '') ? 'active' : '';
      }
    }])
    .component('myComponent', {
        controller: 'MyComponentController',
        template: '<div class="my-component" ng-class="$ctrl.cssClass"><button ng-click="$ctrl.toggle()">{{$ctrl.cssClass}}Do it again</button></div>'
    });
})(angular);

https://plnkr.co/edit/qscGAIjNqQY06hAcnsRM?p=preview

此外，structure guide 可能会帮助您以不同的方式思考组件。

【讨论】：

我发现我没有回复你的答案。但我现在确实通过事件修复了它，以在我的状态下切换外部节点上的类。