43

クラスに基づいて要素にディレクティブを条件付きで適用しようとしています。

これが私の問題の簡単なケースです。このフィドルの結果を参照してください。この例では、クラス名からng-classwithのブール値へのマップを使用していtrueます。私の実際のケースでは、関数のブール結果を使用したいと思います。

マークアップ:

<div ng-app="example">
  <div class="testcase">
    This will have the directive applied as I expect
  </div>
  <div ng-class="{'testcase':true}">
    This will not have the directive applied but I expect it to
  </div>
</div>

JS:

angular.module('example', [])
  .directive('testcase', function() {
      return {
          restrict: 'C',
          link: function(scope, element, attrs) {
              element.css('color', 'red');
          }
      }
    }
  );

divクラスを取得している にディレクティブが適用されないのはなぜng-classですか? AngularJS がディレクティブを処理する順序について誤解していますか?

式の評価に基づいて要素にディレクティブを条件付きで適用するにはどうすればよいですか?

4

3 に答える 3

1 
angular.module('example', [])
  .directive('testCase', function() {
      return {
          restrict: 'C',
          link: function(scope, element, attrs) {
            element.css('color', 'red');
          }
      }
    })
于 2016-08-16T09:20:01.163 に答える
0

私によると、この質問のように ng-class によって設定されたクラスに基づく条件付きディレクティブは使用しないでください。

これを使用しないでください

<div ng-app="example">
  <div class="testcase">
    This will have the directive applied as I expect
  </div>
  <div ng-class="{'testcase':true}">
    This will not have the directive applied but I expect it to
  </div>
</div>

複雑な状況で処理するのは本当に非常に複雑であるため、カスタム ディレクティブでは常に条件を使用してください。

これを使って

link: function (scope, element, attrs) {
    scope.$watch('condition', function(condition){
        if(condition){
            // something going here
        }
        else{
            // something going here
        };
    });
}
于 2017-09-06T07:42:21.020 に答える