jQuery插件不能与Angularjs很好地工作 [英] jQuery Plugins Doesn't Work Well with Angularjs
问题描述
我已经使用的 jQuery的滑块在我的项目中，我使用的角度加载图像。我目前看来是这样的;
i have used jQuery slider in my project in which i am loading images using angular. My current view looks like this;
<div id="slides">
<div class="slides_container">
<a href="" data-ng-repeat="image in gallery">
<img data-ng-src="{{image.imageUrl}}" width="919" height="326" alt="" />
</a>
</div>
</div>
控制器;
blogApp.controller("HomeController", ['$scope', '$resource', function ($scope, $resource) {
var basePath = '/api/',
FrontGallery = $resource(basePath + 'gallery?culture=en-US'),
$scope.gallery = FrontGallery.query();
}]);
和jQuery的滑块code（使它的滑块。我使用这个插件 http://archive.slidesjs.com / ）
And the jQuery slider code (to make it a slider. I'm using this plugin http://archive.slidesjs.com/)
$(document).ready(function () {
$('#slides').slides({
preload: true,
preloadImage: '/content/images/theme/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
});
当我尝试这个code，我所有的图像是从数据库（通过萤火虫调试吧）加载，但jQuery的滑块不应用动画或滑动效果，它
当我删除库中的数据-NG-重复=图片，并使用一些静态内容即图像，我得到的滑动效果了。
这里有什么问题。我认为角被操纵的一些我怎么DOM。这是每当我穿上即使用我的滑盖一些角属性，为什么我得到这个问题。
注意：我与jQuery新闻了同样的问题，即jQuery的 InnerFade 插件的http://medienfreunde.com/lab/innerfade/
下面是如何使用 innerFade 被使用;
When, i try this code, my all images are loaded from database (debugged it through firebug) but jQuery slider isn't applying the animation or sliding effect to it
And when i remove the data-ng-repeat="image in gallery and use Some static content i.e images, i get the sliding effect back.
What's the problem here. I think Angular is manipulating some how my DOM. That's why i'm getting this problem whenever i put i.e use some angular attributes on my slider.
Note: i have the same issue with jQuery news i.e jQuery InnerFade plugin http://medienfreunde.com/lab/innerfade/
Here is how the innerFade is used;
<h1>
<img src="/content/images/theme/hotnews.png" alt="" />Hot News</h1>
<ul id="news">
<li class="ng-repeat:headline in news">
<span class="ng-bind:headline.description"></span>
<a href="#" title="Read More">» more</a>
</li>
</ul>
和控制器;
var HotNews = $resource(basePath + 'article/hotnews?culture=en-US');
$scope.news = HotNews.query();
如何解决这些问题呢？
更新2：
这里是我的路线;
How do i fix these problems?
Update 2:
Here is my routes;
// declare a module
var blogApp = angular
.module('blogApp', ['ngResource', 'ngSanitize'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
//$locationProvider.html5Mode(true);
//configure the routes
$routeProvider
.when('/', {
// list the home page
templateUrl: "tmpl/home.html",
controller: "HomeController"
})
.when('/article/:id', {
// access custom param
foo: "hello world",
// list the home page
templateUrl: "tmpl/article.html",
controller: "ArticleController"
})
.when('/404', {
template: '<h1>404 Not Found!</h1>'
})
.otherwise({ redirectTo: '/404' });
}]);
解决方案1：
暂时的，（如 @Jason Goemaat 回答）对我的作品。所以，这里是我做了什么。我没有创建任何指令，但我笔直地注入 $超时我的控制器，然后我做了以下;
Solution #1:
Temporary, (As @Jason Goemaat answered) works for me. So, here is what i have done. I didn't create any directive but straightly i injected the $timeout to my controller and then i did the following;
$timeout(function () {
jQuery('#news').innerfade({
animationtype: 'slide',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '1em'
});
jQuery('#slides').slides({
preload: true,
preloadImage: 'image/theme/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
}, 100);
和它确实为即工作滑块和 InnerFade
推荐答案
角在操纵你的DOM中，NG-重复指令创建时，它有一个列表，从工作的元素。因此，你需要调用 .slides 角度完成创建元素，因为该插件改变DOM本身了。
Angular IS manipulating your dom, the ng-repeat directive is creating the elements when it has a list to work from. Because of that you need to call .slides after angular is done creating the elements because that plugin is altering the DOM itself.
下面是一个指令，你可以用它来调用 $。滑梯基于当数组长度> 0，这显示了使用额外的属性，如起步上一个元素修改调用幻灯片了。在这里，它会检查你的$范围内）的数组图像，并呼吁 $超时（）在链接打电话叫 .slidesjs（角时完成创建的DOM。我不知道是什么插件，你使用，所以我找到了一个叫 slidesjs 看起来相似。 这里有一个plunker：
http://plnkr.co/edit/4qdUctYMIpd8WqEg0OiO?p=$p$pview
Here's a directive you can use to call $.slides on an element based on when an array has length > 0. It shows using extra attributes like 'start' to modify the call to slides too. Here it checks an array on your $scope called 'images' and calls $timeout() during the link phase to call .slidesjs() when angular is done creating the DOM. I didn't know what plugin you used so I found one called 'slidesjs that looked similar. 'Here's a plunker:
http://plnkr.co/edit/4qdUctYMIpd8WqEg0OiO?p=preview
HTML：
<div my-slides="images" start="4">
<img ng-repeat="image in images" ng-src="{{image.url}}" />
</div>
指令：
app.directive('mySlides', function() {
var directive = {
restrict: 'A',
link: function(scope, element, attrs, ctrl) {
scope.$watch(attrs.mySlides, function(value) {
setTimeout(function() {
// only if we have images since .slidesjs() can't
// be called more than once
if (value.length > 0) {
$(element[0]).slidesjs({
preload: true,
preloadImage: '/content/images/theme/loading.gif',
play: attrs.play || 5000,
pause: attrs.pause || 2500,
start: attrs.start || 1,
hoverPause: attrs.hoverPause || true,
navigation: { active: true, effect: "slide" }
});
}
}, 1);
});
}
};
return directive;
});
有一点需要注意的是，它仍然只能被调用一次，所以如果你的图片列表被更新，它不会工作。要做到这一点，你可以创建在该指令的内容...
One thing to note is that it still can only be called once, so if your image list gets updated it won't work. To do that you could create the content in the directive...
这篇关于jQuery插件不能与Angularjs很好地工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
