1
私は現在、いくつかの古いディレクティブを新しいコンポーネント構文に書き直しています。私のディレクティブの1つは、DOMノードのクラスを切り替える必要があります。コンポーネントDOMノードのクラスを切り替える方法
<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="[email protected]" 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>
私はあなたの答えに答えていないことを知りました。しかし、私は実際に私の州の外部ノードのクラスを切り替えるためのイベントを通してそれを修正しました。 – Pjetr