与jQuery整合angularJS [英] Integrating angularJS with JQuery
问题描述
我是新为angularJS和jQuery。我想preVIEW的图像时，我的鼠标移动到某个环节。 previewing图像的功能是从 http://cssglobe.com/lab/tooltip /03/main.js 。和预期的演示也是：
http://cssglobe.com/lab/tooltip/03/
I am new for both angularJS and Jquery. I would like to preview an image when my mouse moves to some link. The function of previewing image is from http://cssglobe.com/lab/tooltip/03/main.js. And the expected demo is also: http://cssglobe.com/lab/tooltip/03/
下面是我的code：
的index.html
"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的code是：
The code of app.js is:
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-重复，但没有NG重复工作正常。
It doesn't work inside ng-repeat, but works fine without ng-repeat.
感谢
推荐答案
您可以自定义的指令，并调用链接函数内部jQuery插件
you can make custom directive and call your jquery plugin inside link function
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>
这篇关于与jQuery整合angularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
