0

コンテンツが機能するなど、bootstrap.ui ディレクティブ ツールチップを使用して、HTML 要素にツールチップを追加できます。

ただし、インライン編集用に独自の属性ディレクティブを作成しています。ディレクティブは次のように使用されます。

<h4 ng-bind="model.fieldName" type="text" style="display: inline" edit-on-click="model.fieldName" save="saveFieldName"></h4>

私のディレクティブ edit-on-click は、入力ボックスを配置し、ng-model を edit-on-click と同じ名前に設定する onclick 関数を追加するだけです。ユーザーが Enter キーを押すか、フィールドをぼかすと、save メソッドが呼び出されます。これは完全に機能し、同じことを行う他の多くのディレクティブがあります。

ただし、mouseenter の既存のタグにツールチップを追加して、このフィールドが編集可能であることを表示したいと考えています。

リンク関数にツールチップ属性を追加し、コンパイル関数にも追加しようとしたなど、いくつかのことを試しましたが、角度は属性をディレクティブとして処理しません。既存のタグに新しいディレクティブがあることをAngularに表示させるにはどうすればよいですか?

これはディレクティブの一部である必要があるため、元の html タグにツールチップを追加したくありません。

私のディレクティブは次のようになります

directive("editOnClick", function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, iElement, iAttrs, controller) {
                var inputC = $compile("<input type='" + iAttrs.type + "' ng-model='" + iAttrs.editOnClick + "'>")(scope);
                var input = inputC.eq(0);
                var oldDisplay, saveFunc = iAttrs.save;
                input.blur(function (evt) {
                    if (saveFunc && scope[saveFunc]) {
                        scope[saveFunc](function () {
                            input.css("display", "none");
                            iElement.css("display", oldDisplay);
                        });
                    }
                });
                iElement.after(input);
                iElement.click(function () {
                    oldDisplay = iElement.css("display");
                    iElement.css("display", "none");
                    input.css("display", "block")
                    input.click();
                    input.keyup(function (evt) {
                        if (evt.keyCode === 13) {
                            input.blur();
                        }
                    });
                });
            }
    }
})

したがって、iElement に属性を簡単に追加できますが、ツールチップを取得するためにディレクティブとして解析するように angular に指示する必要があります。

4

1 に答える 1