-4
rated 0 times
[
2]
[
6]
/ answers: 1 / hits: 5579
/ 11 Years ago, tue, december 31, 2013, 12:00:00
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>
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'
}
}
});
};
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>
In trying the above code I get the below error:
TypeError: Object #<Object> has no method '$watch'
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?
More From » angularjs
