1

私はangularjsの初心者で、単純なものを見逃す必要があります。私がやろうとしているのは、角度のある ui を使用してツールチップを作成することです。プレースホルダー値に基づいて要素の属性に 3 つの角度ディレクティブを追加する顧客ディレクティブを作成します。

myApp.directive('ngTooltip', function () { 
    return{
        restrict: 'A',
        link: function (scope, element, attrs) {
            attrs.$set('tooltip', attrs['placeholder']);
            attrs.$set('tooltip-placement', 'bottom');
            attrs.$set('tooltip-trigger', 'focus');
        }
    }
});

私のマークアップでは、

期待どおりにレンダリングされました：

<input name="test" placeholder="this is test" tooltip="this is test" tooltip-placement="bottom" tooltip-trigger="focuse" />

ただし、ツールチップは機能しません。3 つのツールチップ属性をマークアップに直接適用すると、ツールチップが機能します。

カスタム ディレクティブによって追加された 3 つのディレクティブは、angularjs によって評価されないようです。

何か案は？

4

1 に答える 1

3

で要素を再コンパイルせずにディレクティブを動的に追加することはできません$compile。回避策を講じない限り、無限ループが発生します。これを処理する簡単な方法があります。ディレクティブ テンプレートを宣言すると、AngularJS がディレクティブを適切に処理します。

myApp.directive('ngTooltip', function () { 
    return{
        restrict: 'A',
        template: '<input tooltip tooltip-placement="bottom" tooltip-trigger="focus">',
        replace: true,
        link: function (scope, element, attrs) {
          attrs.$set('tooltip', attrs['placeholder']);
        }
    }
});

作業例: plunker .

于 2013-09-20T17:43:11.727 に答える