将angularJS与JQuery集成

我是angularJS和Jquery的新手。 当我的鼠标移动到某个链接时，我想预览图像。 预览图像的function来自http://cssglobe.com/lab/tooltip/03/main.js 。 预期的演示也是： http ： //cssglobe.com/lab/tooltip/03/

这是我的代码：

“的index.html”

     this.screenshotPreview = function(){ xOffset = 10; yOffset = 30; // these 2 variable determine popup's distance from the cursor // you might want to adjust to get the right result $("a.screenshot").hover(function(e){ this.t = this.title; this.alt = ""; var c = (this.t != "") ? "
" + this.t : ""; $("body").append("
 "+ this.t +"
"); $("#screenshot") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px") .fadeIn("fast"); }, function(){ this.title = this.t; $("#screenshot").remove(); }); $("a.screenshot").mousemove(function(e){ $("#screenshot") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px"); }); }; // starting the script on page load $(document).ready(function(){ screenshotPreview(); });   #screenshot{ position:absolute; border:1px solid #ccc; background:#333; padding:5px; display:none; color:#fff; }    
  {{image.name}} 
   

app.js的代码是：

  angular.module('app') .controller('Ctrl', function ($scope) { $scope.selectedImage= ''; $scope.images= [ {id : 1, name : 'image1'}, {id : 2, name : 'image2'}, {id : 3, name : 'image3'} ]; $scope.getImage = function (){ if (!angular.equals($scope.selectedImage, '')){ return 'image.png'; } }; }); 

它在ng-repeat中不起作用，但在没有ng-repeat的情况下工作正常。

谢谢

Answer 1

您已经声明了一个没有任何依赖关系的模块。 你需要做的是：

 angular.module('app', []) 

这是角度…dependency injection的核心特征。 你可以在这里读更多关于它的内容：

Angular JSdependency injection。

Answer 2

你可以制作自定义指令并在链接函数中调用你的jquery插件

  var directiveModule = angular.module("directiveModule", []); directiveModule.directive('wrapJqueryplugin', function() { return { restrict : 'E', link : function(scope, element, attrs) { *********your jquery code **************** }); 

并在你看来

   *** any Dom Elements ***