javascript - AngularJS ng-mouseover & 编译模板

Question

我正在尝试使用 angular 实现 qTip。我有一个 ng-repeat 并希望在鼠标悬停在我收藏中的每个项目的特定 HTML 元素上时显示一个 qTip:

 <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 代码:

$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 中有模板:

<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>

在尝试上面的代码时，我得到以下错误:

TypeError: Object #<Object> has no method '$watch'

我尝试了指令路由并让它工作。但是，当我只需要在鼠标悬停事件实际发生时执行时，我的指令代码似乎不是仅在“鼠标悬停”时被调用，而是针对所有指令引用执行。指令代码如下:

<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'
                    }
                }
              });

        }
    }
});

关于我在这里遗漏的任何想法？

Answer 1

是this你想要的结果？

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>