Question

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

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

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

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

感谢您抽出宝贵时间！

要查看完整正常（或更好，不正在工作）的示例，您可以查看此代码段，或前往Plunkr

＆＃13;

(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);

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 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

Als this structure guide可以帮助您对组件进行不同的思考。

如何在component-DOM-node上切换类

1 个答案: