私はHTMLのツールチップを作成するために、<a href="https://atomiks.github.io/tippyjs/" rel="nofollow noreferrer">Tippy library</a>を使用していますAngularJS

2つの異なるコントローラに

Fiddler link 私はHTMLのツールチップを作成するために、<a href="https://atomiks.github.io/tippyjs/" rel="nofollow noreferrer">Tippy library</a>を使用していますAngularJS

をディレクティブを適用することができません。私はちょっとしたヒントを扱うために2つの指示をしました。

.directive('settings', function() { 
    return { 
     templateUrl: 'tippy-template.html' 
    }; 
    }) 
    .directive('tippy', function() { 
    return function (scope) { 
     tippy('.tippy', { 
      position: 'bottom', 
      animation: 'shift', 
      arrow: true, 
      interactive: true, 
      arrowSize: 'big', 
      distance: 20, 
      html: document.getElementById('setting-template'), 
      appendTo: document.getElementById('settings-controller') 
     }) 
    }; 
    })

settingsディレクティブは、HTMLのツールチップのコードが含まれており、それがアクティブに取得するtippyディレクティブは、HTMLのツールチップのコードに配置されます。 tippyツールは、コントローラが存在するコントローラとデータを共有します。この例では、キャッシュを共有します。

tippyFiddler 1 controllerのインスタンスが1つしかない場合は、すべて正常に動作します。私はこの指令を再び使用することはできません。私は持っている問題を再現することができました。Fiddler 2 controllers link。

私の理解から、Tippyは、一意のIDがある場合にのみ使用できます。これを解決する方法はありますか？

ティッピー・template.html

<div id="setting-template" tippy> 
    <ul class="collection"> 
    <li class="collection-item"> 
     <div class="col-title"><b>{{title}}</b></div> 
     <div class="col-title">Cache</div> 
     <div class="col-item"> 
     <div class="switch"> 
      <label>Off 
       <input ng-model="cache" type="checkbox"><span class="lever"></span> On 
      </label> 
     </div> 
     </div> 
    </li> 
    <li class="collection-item"> 
     <div class="col-title"><b>Cache Result</b></div> 
     <div class="col-item">{{cache}}</div> 
    </li> 
    </ul> 
</div>

ディレクティブの使用（コントローラ内部の）

<div id="settings-controller" settings></div>

出典

2017-08-29 Shank

私たちは独自の立場に立つために、tippy-template.htmlとディレクティブの使用例を追加します。それが立っているので、唯一言うことは、あなたのディレクティブにdocument.getElementById（）を持つべきではないということです。 – Walfrat

@Walfrat更新（フィドラーにも両方が含まれています）、Tippyはテンプレートを使用するためにIDを与えられる必要があります。 – Shank

これは私がここに見るものではなく、HTMLElementを与えています。document.getElementById（）はIdを返しません。idに一致するHTMLオブジェクトを返します。このディレクティブを使用すると、要素オブジェクトを挿入できます。ディレクティブが使用されたオブジェクトのIDを取得できます。最後に、複数のIDをテンプレートに入れて複数回使用すると、うまく動作しません。なぜなら、複数のIDをHTMLに結びつけるからです。 – Walfrat

私が間違って何をやっていたに私の脳をwreakingた後、私は最終的に解決策を得ました。あなたは基本的にクラス（.tippy）の一意のIDを作成する必要があり、私は基本的に要素を直接使用し、あなたはdocument.getElementById()が動作するために必要であると言っていましたが、$element[0]は同じことをします。両方の出力をコンソールに記録することでそれを把握します。とにかく、以下のフィドルを解決策でチェックしてください。

JSFiddle Demo

HTML：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
    rel="stylesheet"> 
<body ng-app="myapp"> 
    <div class="row"> 
    <!-- CONTROLLER 2--> 
    <div class="col s12 m6" ng-controller="controller1"> 
     <div class="card fill1"> 
      <div class="card-content"> 
       <span class="card-title">{{title}}</span> 
       <i class="material-icons tippy c-pointer" data-theme="light" data-trigger="click" data-interactive="true" data-animatefill="false" data-arrow="true">settings</i> 
       <div id="settings-controller2" parent="tippy" settings></div> 
       <div class="filler"></div> 
       Cache is : <b>{{cache}}</b> 
      </div> 
     </div> 
    </div> 

    <!-- CONTROLLER 2--> 
    <div class="col s12 m6" ng-controller="controller2"> 
     <div class="card"> 
      <div class="card-content"> 
       <span class="card-title">{{title}}</span> 
       <i class="material-icons tippy2 c-pointer" data-theme="light" data-trigger="click" data-interactive="true" data-animatefill="false" data-arrow="true">settings</i> 
       <div id="settings-controller" parent="tippy2" settings></div> 
       <div class="filler"></div> 
       Cache is : <b>{{cache}}</b> 
      </div> 
     </div> 
    </div> 
    </div> 
    <script type="text/ng-template" id="tippy-template.html"> 
     <div id="setting-template" tippy> 
       <ul class="collection"> 
      <li class="collection-item"> 
      <div class="col-title"><b>{{title}}</b></div> 
      <div class="col-title">Cache</div> 
      <div class="col-item"> 
       <div class="switch"> 
       <label>Off 
           <input ng-model="cache" type="checkbox"><span class="lever"></span> 
       On</label> 
       </div> 
      </div> 
      </li> 
      <li class="collection-item"> 
      <div class="col-title"><b>Cache Result</b></div> 
       <div class="col-item">{{cache}}</div> 
      </li> 
      </ul> 
     </div> 
    </script> 
</body>

JS：私は投稿多分使用するディレクティブは、より汎用的で使いやすいようにしようとすることをお勧めいたします

var myapp = angular.module('myapp', []) 

.directive('settings', function() { 
    return { 
     templateUrl: 'tippy-template.html', 
     controller: function($scope, $element, $attrs){ 
     $scope.parent = $element; 
     $scope.tippyClass = $attrs.parent; 
     } 
    }; 
    }) 
    .directive('tippy', function() { 
    return { 
     controller: function ($attrs, $scope, $element) { 
     console.log($attrs.id); 
      tippy('.'+$scope.tippyClass, { 
      position: 'bottom', 
      animation: 'shift', 
      arrow: true, 
      interactive: true, 
      arrowSize: 'big', 
      distance: 20, 
      html: $element[0], 
      appendTo: $scope.parent[0] 
      }) 
     } 
     }; 
    }) 
    .controller('controller2', function($scope) { 
    $scope.title = "Controller 2"; 
    $scope.cache = true; 
    }) 
    .controller('controller1', function($scope) { 
    $scope.title = "Controller 1"; 
    $scope.cache = false; 
    });

他の人が使用できるようにGithub GIST Tippy eas将来はily！

出典

2017-08-29 19:23:56

注：最初の要素またはtippy関数は、DOM要素でもあります。 – Walfrat

ありがとう、私はそのようなことをしようとしていましたが、失敗しました。だから私はちょうど複数のtippysを作った。あなたは私を救った:) – Shank

@Shankこのコードをさらに改善して、GISTを作りなさい。 –

私はHTMLのツールチップを作成するために、<a href="https://atomiks.github.io/tippyjs/" rel="nofollow noreferrer">Tippy library</a>を使用していますAngularJS

答えて

関連する問題