ng-mouseenter不能在AngularJs工厂内工作

我想在我的工厂内部实现工具提示类型功能，但是在工厂内部调用ng-mouseenter和ng-mouseleave事件时遇到问题。请指导如何继续。ng-mouseenter不能在AngularJs工厂内工作

代码： HTML：

<DOCTYPE html> 
<html ng-app="demoApp"> 
    <head> 
     <title>Mouseevent - Second</title> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script> 
     <script type="text/javascript" src="app.js"></script> 
     <style> 
     .red{ 
      background-color: red; 
     } 
     .show{ 
      background: lightgray; 
      border: 1px solid black; 
      position: absolute; 
      z-index: 98; 
     } 
     </style> 
    </head> 
    <body ng-controller="demoController"> 
     <div ng-bind-html="fromFactory"></div> 
</body> 
</html>

App.js

var app = angular.module('demoApp',[]) 
app.controller('demoController',function($scope,$sce,hoverFactory){ 
$scope.fromFactory = hoverFactory.demo(); 
$scope.onMouseEnter = function(evt){ 
    $scope.hovered = true; 
    $scope.mouse = { 
       'left': evt.pageX + 10 + 'px' , 
       'top': evt.pageY + 10 + 'px' 
    } 
}; 
$scope.onMouseLeave = function(){ 
    $scope.hovered = false; 
    } 
}); 

app.factory('hoverFactory',function($sce){ 
    return{ 
    demo:function(){ 
    var template = '<div ng-class="{red: hover}" ng-mouseenter="onMouseEnter($event)"'+ 
     'ng-mouseleave="onMouseLeave()" > "Hover mouse on me to make tooltip move! "</div>' + 
     '<div class="show" ng-show="hovered" ng-style="mouse" ng-init= "hover=false">movable tooltip</div>'; 

     var result = $sce.trustAsHtml(template); 
     return result; 
    } 
    } 
});

请引导人，我坚持

来源

2015-11-19 naah

你想做什么？你需要$编译任何HTML为了角度来连接事件和东西...另外，这不是你会在工厂做的事 – sirrocco

我确实同意你，在这里我试图添加工具提示功能的现有码。我不知道如何调用函数来获取工具提示的x和y坐标 – naah

您应该使用的属性工具提示目标一个指令的基础。在那里，你可以访问该元素的范围和适用任何你需要的jQuery的工具提示：

<div tooltips-target >lorem</div>

与您共创指令

app.directive('tooltipsTarget', function() { 
    return { 
    restrict: 'E', 
    scope: {}, 
    link: function (scope, element) { 
     $(element).myTooltips(); 
    } 
    }; 
});

这里是一个的jsfiddle链接：

JsFiddle

来源

2015-11-19 18:21:41 ilyass

我试图在工厂模板中添加指令，但它没有调用指令 – naah

我添加了JsFiddle描述。 – ilyass

ng-mouseenter不能在AngularJs工厂内工作

回答

相关问题