我正在使用Tippy 库来创建 HTML 工具提示。我制定了 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 工具与它所在的控制器共享数据,在本例中它共享缓存。
如果只有一个tippy
Fiddler 1 控制器实例,一切正常。我无法再次使用该指令。我能够重新创建我遇到的问题,Fiddler 2 controllers link。
据我了解,
Tippy
只有在有唯一 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>
指令用法(在控制器内部)
<div id="settings-controller" settings></div>