Fiddler link
我正在使用Tippy library创建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 controller的一个实例，则一切正常。我无法再次使用该指令。我能够重现我遇到的问题，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>
最佳答案
在为自己做错的事情绞尽脑汁之后，我终于找到了解决方案。基本上，您需要为类（.tippy）创建一个唯一的ID，并且我基本上直接使用了元素，您说的是document.getElementById()是其工作所必需的，但是$element[0]可以做同样的事情。通过在控制台中记录两个输出来解决这一问题。无论如何，请检查下面的提琴与解决方案。
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！