2013-10-07 5 views
5

ng-classを使用して 'class'ディレクティブをロードしようとしています。私の指示がロードされることはありません。このディレクティブは多目的ディレクティブです。このディレクティブは独立したスコープを作成したくありません。 ng-classの条件に基づいて、必要なときにのみロードされるため、attributeまたはelementディレクティブは使用されません。誰もこれをやろうとして成功しましたか?ng-classを使用してディレクティブをロードするとクラスディレクティブが動作しない

<div ng-class="someClass {{tooltip: enabled}}"></div> ここではenabledはスコープ変数です。

app.directive('tooltip', ['$timeout', '$location', '$rootScope', function (timer, $location, $rootScope) { 
    return { 
     restrict: 'C', 
     transclude: true, 
     link: function (scope, element) { 
      var printContent = function() { 
       /* uses the content of .tooltip-content if it is a complex html tooltip, 
        otherwise 
        you can use the title attribute for plaintext tooltips 
       */ 
       var tooltipContent = $(element).find('.tooltip-content').html(); 
       if (!tooltipContent) { 
        tooltipContent = $(element).attr('title'); 
       } 
       $(element).tooltip({ 
        content: tooltipContent, 
        items: "img, a, span, button, div", 
        tooltipClass: "tooltip", 
        position: { my: "left+30 top", at: "right top", collision: "flipfit" }, 
        show: { effect: "fadeIn", duration: "fast" }, 
        hide: { effect: "fadeOut", duration: "fast" }, 
        open: function (event, ui) { $rootScope.tooltipElement = event.target; } 
       }); 
      }; 
      timer(printContent, 0); 
     } 
    }; 
}]); 
+0

あなたは設定を忘れているかもしれません: 'restrict: 'C''? – Cherniv

+0

そのセット。私のポストへの更新を見てください。 – vaibinewbee

+0

がこの構文を試しているかもしれません: 'class =" someClass "ng-class =" {tooltip:enabled} "' – Cherniv

答えて

0

興味深い問題です。 ng-classディレクティブは、クラスを追加した後にコンテンツを再コンパイルしないので、ng-classディレクティブを使用したくないようです。あなたはおそらく値がtrueの場合、実際に再コンパイルし、独自の動的なクラスのディレクティブを作成したいと思う:

app.directive('dynamicClass', function($compile) { 
    return { 
     scope: { 
      dynamicClassWhen: '=', 
      dynamicClass: '=' 
     }, 
     link: function(scope, elt, attrs) { 
      scope.$watch('dynamicClassWhen', function(val) { 
       if (val) { 
        console.log(val); 
        elt.addClass(scope.dynamicClass); 
        $compile(elt)(scope); 
       } 
      }); 
     } 
    }; 
}); 

$compileが十分にある場合は、クラスを削除するとに応じて能力のためにこれを変更する必要がありますあなたやhtmlをさらに操作する必要がある場合は、これはあなたのための正しい軌道になるようです。私はfiddleを実際にこれを使って作った。

希望すると便利です。

+0

'ngClass'によって行われた変更が反映されたときに要素を再コンパイルすることはAngular core IMHOに組み込むべきです。このアイデアをお寄せいただきありがとうございます。ちなみに、私はそれを試してみましたhttp://stackoverflow.com/questions/22733848/angularjs-attempt-to-dynamically-apply-directive-using-ngclass-causing-weird-fuと奇妙な行動を得ました。問題がコード、実装、またはAngularであったのかどうかはわかりませんが、私はもう1つのアプローチをとり、それ以上追求しませんでした。 – poshest

+0

Hmm。あなたが別のアプローチを見つけてうれしく思います。私の答えは、実際の状況ではうまくいくようです。他の質問のあなたのフィドルは、物事のすべての要素に焦点を当てた問題を抱えています。また、入力を1回クリックするとクラスを追加し、再度フォーカスすると、それを再び追加してコンパイルします(指示の数が増えます)。これらのことは修正することができましたが、その質問に対して答えが受け入れられました。これはここに収まるようです。あなたが何か他のものが必要な場合は教えてください。 – hassassin

+0

他のスレッドでこれについて議論しているはずですが...はい、そうです。後で 'removeClass()'ビットを追加して、addClassが同じクラスを2回追加することを期待していませんでしたjQueryにはありません)。あなたのコメントは、私に 'else {elt.removeClass(s​​cope.dynamicClass); } '' $ compile'を 'if'の外側に移動しますが、jsFiddleを完全にクラッシュさせます。http://jsfiddle.net/ss6Y5/10/。あなたが他のスレッドに解決策を提供したいのであれば、少なくとも私はそれをupvoteしたいと思います。あなたのコードを使ったパターンがはるかに良いのが好きですが、受け入れられた答えを撤回するのが丁寧なのか分かりません! – poshest

関連する問題