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