将angularJS与JQuery集成_Jquery_Html_Angularjs

将angularJS与JQuery集成

jquery html angularjs

将angularJS与JQuery集成,jquery,html,angularjs,Jquery,Html,Angularjs,我对angularJS和Jquery都是新手。我想在鼠标移动到某个链接时预览图像。预览图像的功能来自。预期的演示还包括：这是我的密码： index.html <!DOCTYPE html> <html> <head> <script src="jquery.js" type="text/javascript"></script> <script> this.screenshotPreview = func

我对angularJS和Jquery都是新手。我想在鼠标移动到某个链接时预览图像。预览图像的功能来自。预期的演示还包括：

这是我的密码：

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>

它在ng repeat内不起作用，但在没有ng repeat的情况下工作良好

谢谢

您可以自定义指令并在链接函数中调用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>

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

angular.module('app', [])

这是角度依赖注入的核心特性。您可以在此处阅读更多信息：

你所说的工作正常而不重复是什么意思？

angular.module('app', [])