1

親スコープにバインドされたいくつかの値に基づいて、カスタム ディレクティブが独自のクラスを前処理できるようにしたいと考えています。ただし、独自の ng-class を設定し、ローカル スコープで関数を実行するディレクティブを取得できないようです。

directive('testDirective',function(){
     restrict: 'E',
     scope: {
         inputValue: '='
     },
     template: '<div>dynamically styled content</div>',
     bindToController: true,
     controllerAs: 'ctrl',

     compile: function(element){
          element.attr('ng-class', 'ctrl.getClass()');
     },

     controller: function(){
         this.getClass = function(){
             //return array of classes based on value of this.inputValue
         }
     }
});

残念ながら、式は評価されず、文字列として割り当てられるだけなので、スタイルは適用されません。DOM要素を調べると、次のように表示されます

ng-class="ctrl.getClass()"

jQuery を使用してリンク関数にクラスを追加することもできますが、それらはデータにバインドされません。また、可能な限り $watch の使用を避けたいと考えていました。

どんなアイデアでも大歓迎です！

4

1 に答える 1

2

次のような css ファイルがあるとします。

.myButton1 {
  color: red;
}

.myButton2 {
  color: blue;
}

あなたのディレクティブでは、ng-classでこれを行うことができます:

directive('testDirective',function(){
     restrict: 'E',
     scope: {
         inputValue: '='
     },
     template: '<div ng-class="ctrl.getClass()">dynamically styled content</div>',
     bindToController: true,
     controllerAs: 'ctrl',
     controller: function(){
         this.getClass(){
           return (ctrl.inputValue === 'something' ? "myButton1" : "myButton2");
         }
     }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

getClass メソッドは、有効な定義済みの css クラス、1 つまたはそれらの配列を返す必要があります。

于 2015-05-26T11:45:51.263 に答える