1

次のように、AngularStrap bs-tooltipプロパティ <ul>内に独自のディレクティブ (checkStrength) を持つ要素を持たせようとしています。title

$scope.tooltip = {  
  title: '<ul id="strength" check-strength="pw"></ul>',   
  checked: false  
};

私が望む動作は次のとおりです。ユーザーが入力テキストボックスをクリックすると、テキストボックスに入力したパスワードの強度を示すツールチップが表示されます。

以下の 2 つのプランカーに示すように、これは機能しません。

bs-tooltip 外のカスタム "checkStrength" ディレクティブは正常に動作します: Plunker

bs-tooltip 内のカスタム "checkStrength" ディレクティブが機能しない: Plunker

4

1 に答える 1

2

わかりました、これはすぐにサポートされているようには見えません。独自のバインディング ディレクティブを作成する必要があります。

指令

.directive('customBindHtml', function($compile) {  
  return {

    link: function(scope, element, attr) {
          scope.$watch(attr.customBindHtml, function (value) {
              element.html(value);
              $compile(element.contents())(scope);
          });
    }
  };

});

これは Angular Straps コードに入り、plunker の tooltip.js の 10 行目に次の変更を加えます。

テンプレート

<div class="tooltip-inner" custom-bind-html="title"></div>

次に、config の html プロパティを false に設定します。

設定 

.config(function($tooltipProvider) {
  angular.extend($tooltipProvider.defaults, {
    html: false
  });
})


例： プランカー

于 2014-01-16T18:02:36.783 に答える