Question

我是angularJS和Jquery的新手。我希望在鼠标移动到某个链接时预览图像。预览图像的功能来自http://cssglobe.com/lab/tooltip/03/main.js。预期的演示还包括： http://cssglobe.com/lab/tooltip/03/

这是我的代码：

“的index.html”

<!DOCTYPE html>
<html>
<head>
  <script src="jquery.js" type="text/javascript"></script>
  <script>
    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 != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='screenshot'>
        <img src='"+ this.rel +"' alt='url preview' />"+ this.t +"</p>");
        $("#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();
  });
 </script>
 <style>
   #screenshot{
     position:absolute;
     border:1px solid #ccc;
     background:#333;
     padding:5px;
     display:none;
     color:#fff;
    }
  </style>
 </head>
 <body ng-app="app"  ng-controller="Ctrl">
  <li ng-repeat="image in images" style="color:#000000;">
   <a href="#/image"  class="screenshot" 
      ng-mousemove="$parent.selectedImage= image.id"
      rel= "{{getImage()}}" >
         {{image.name}}</a>
 </li>
 </body>
</html>

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

你可以制作自定义指令并在链接函数

中调用你的jquery插件

  var directiveModule = angular.module("directiveModule", []);

    directiveModule.directive('wrapJqueryplugin', function() {
        return {
            restrict : 'E',
            link : function(scope, element, attrs) {        
    *********your jquery code ****************
});

并在您的视图中

    <wrap-jqueryplugin>
***    any Dom Elements ***
    </wrap-jqueryplugin>

Answer 2

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

angular.module('app', [])

这是角度...依赖注入的核心特征。你可以在这里阅读更多相关信息：

Angular JS dependency injection.

将angularJS与JQuery集成

2 个答案: