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

ответ

Смежные вопросы