AngularJS ng-mouseover & compiling templates

Question

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?

Answer 1

Is this the result you wanted?

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>