web-dev-qa-db-ja.com

Angular-UI-双方向データバインディングを使用したカスタムツールチップ/ポップオーバーのブートストラップ

現在のプロジェクトで angular-ui-bootstrap を使用していますが、ユーザーが特定の要素（名前の変更/編集/削除など）に対して何らかのアクションを実行できるようにするポップオーバーの要件があります。 ..）。 angle-uiのbootstrap popoverは、デフォルトでカスタムhtmlまたはデータバインディングを許可しないため、ツールチップ/ popover .providerおよび.directiveをコピーしました。私のニーズに合わせてカスタマイズします。

主な問題：ポップアップを閉じて再度開いた後、ng-clickバインディングが失われています。

二次的な問題：scope.$parent.$parent.itemを手動で設定する必要がないように、双方向のデータバインディングを設定できますか？

プランカー： http://plnkr.co/edit/HP7lZt?p=preview


元のtooltip.js :にどのような変更が加えられたかを一目で確認できます

  • ポップオーバー.directiveは、最も変更されたものです。
.directive('iantooltipPopup', function () {
    return {
      restrict: 'E',
      replace: true,
      scope: { mediaid: '@', title: '=', content: '@', placement: '@', animation: '&', isOpen: '&' },
      templateUrl: 'popover.html',
      link: function (scope, element, attrs) {
        scope.showForm = false;

        scope.onRenameClick = function () {
          console.log('onRenameClick()');
          scope.showForm = true;
        };

        scope.onDoneClick = function () {
          console.log('Title was changed to: ' + scope.title);
          scope.showForm = false;
          scope.$parent.$parent.item.title = scope.title;
          scope.$parent.hide();
        };
      }
    };
  })
  • ツールチップ.providerは、双方向バインディングをtitleフィールドで機能させるために、ここでのみ変更されました。
var template = 
  '<'+ directiveName +'-popup '+
    // removed
    // 'title="'+startSym+'tt_title'+endSym+'" '+
    'title="tt_title" ' +
    'content="'+startSym+'tt_content'+endSym+'" '+
    'placement="'+startSym+'tt_placement'+endSym+'" '+
    'animation="tt_animation()" '+
    'is-open="tt_isOpen"'+
    '>'+
  '</'+ directiveName +'-popup>';

どんな助けにも感謝します。Angularを使い始めるとき、コンパイルされたディレクティブとプロバイダーは大きな精神的ハードルのように思えます。私はこのディレクティブを理解して操作しようとしているので、実際にコンポーネント自体が必要なのと同じように、そこから学ぶことができます。

angularjsangularjs-directiveangular-ui-bootstrap
12
grailian

これが動作中です プランカー

問題は元のツールチップにあります。閉じた後にツールチップを削除しますが、次に開いたときにツールチップを再度コンパイルすることはありません。 （ツールチップトリガーのリンク機能は初めて実行されます。）

私のアプローチは、ツールチップを削除するのではなく、CSSのdisplay属性でツールチップを制御することです。

また、この問題について話し合うために プルリクエスト を作成します。

プランカーを更新するだけです。

2つ目は、実際には親スコープとリンクさせるだけです。ただし、私のアプローチでは子スコープが作成されます。時計でもできると思います。

21
maxisam