AngularJS NG-鼠标悬停和放大器;编译模板 [英] AngularJS ng-mouseover & compiling templates
问题描述
我想实现qTip具有角。我有一个NG重复并希望显示在特定HTML元素的鼠标悬停一个qTip我的收藏中的每一项:
I'm trying to implement qTip with angular. I have a ng-repeat and want to display a qTip on mouseover of a specific HTML element for every item in my collection:
<div id="{{feedItem.id}}" class="cxfeeditem feeditem cxhover" ng-repeat="feedItem in items">
...
..
<a ng-mouseover="onNameMouseOver(feedItem.actor,$event)">{{feedItem.actor.name}}</a>
</div>
控制器code:
Controller code:
$scope.onNameMouseOver = function(actor,event){
var content=$templateCache.get('bubble.html');
var compiledContent = $compile(content)(actor);
$(event.target).qtip({
show: 'mouseover',
hide: 'mouseout',
content: compiledContent,
position:{
at: 'right center'
},
style: {
tip: {
corner: 'left top'
}
}
});
};
我希望其他人能够改变qTip泡沫流行的模板。所以,我在index.html的模板:
I want others to be able to change the template of the qTip bubble pop. So I have the template in index.html:
<script type="text/ng-template" id="chatter-bubble.html">
<div class="...">
<div class="hoverInfo">
<div class="nameAndInfo withPresence">
<a href="#" class="name">{{actor.name}}</a>
</div>
</div>
</div>
</script>
在尝试上述code,我得到以下错误:
In trying the above code I get the below error:
TypeError: Object #<Object> has no method '$watch'
我试过指令路线,得到它的工作。但是,而不是被调用的唯一的鼠标悬停我的指令,code似乎得到所有指令引用执行时,我只需要在鼠标悬停事件实际发生时执行。指令code是如下:
I tried the directive route and got it to work. But instead of being invoked only on "mouseover" my directive code seems to get executed for all directive references when I only need to execute when the mouseover event actually happens. Directive code is below:
<span bubble="feedItem.actor"...>
</span>
myApp.directive('bubble', function($http, $compile, $templateCache){
return {
restrict: 'A',
scope:{
actor:"=chatterBubble"
},
link: function(scope, element, attrs)
{
var content=$templateCache.get('.html');
scope.sessionToken=getSessionToken();
var compiledContent = $compile(content)(scope);
$(element).qtip({
show: 'mouseover',
hide: 'mouseout',
content: compiledContent,
position:{
at: 'right center'
},
style: {
tip: {
corner: 'left top'
}
}
});
}
}
});
这是我错过了什么在这里的任何想法?
Any ideas on what i'm missing here?
推荐答案
这的结果你想?
JS:
angular
.module("app", [])
.value("actors", [
"John Doe",
"Doe Johns",
"Johnny Doe",
"Doe John"
])
.controller("ctrl", function ($scope, actors) {
$scope.actors = actors;
})
.directive("qtip", function ($compile, $templateCache) {
var clone = $compile($templateCache.get("bubble.html"));
function link (scope, el, attr) {
el.qtip({
position: {
at: "bottom left"
},
style: {
tip: {
corner: "top center"
}
},
content: {
text: function () {
return scope.$apply(function () {
return clone(scope);
});
}
}
});
}
return {
link: link,
scope: {
text: "=qtip"
}
};
});
HTML:
<script type="text/ng-template" id="bubble.html">
<div>
<div class="hoverInfo">
<div class="nameAndInfo withPresence">
<a href="#" class="name">{{text}}</a>
</div>
</div>
</div>
</script>
<ul ng-controller="ctrl">
<li
ng-repeat="actor in actors"
qtip="actor"
>{{actor}}</li>
</ul>
这篇关于AngularJS NG-鼠标悬停和放大器;编译模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!