1

現在、いくつかの古いディレクティブを新しいコンポーネント構文に書き直しています。私のディレクティブの 1 つは、DOMnode でクラスを切り替える必要があります。

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

コンポーネントに変換すると、この機能は機能しなくなりました。私が見つけられなかった新しい機能はありますか? それとも、これはもはや不可能ですか？

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

お時間を割いていただきありがとうございます。

完全に機能する (またはより良い、機能しない) 例を確認するには、このスニペットを確認するか、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>

4

1 に答える 1