jQuery插件与Angularjs不兼容

我在我的项目中使用了jQuery滑块,我使用angular加载图像.我目前的观点是这样的;

        <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滑块代码(使它成为一个滑块.我正在使用这个插件http://archive.slidesjs.com/)

$(document).ready(function () {
    $('#slides').slides({
        preload: true,
        preloadImage: '/content/images/theme/loading.gif',
        play: 5000,
        pause: 2500,
        hoverPause: true
    });
});

什么时候,我尝试这个代码,我的所有图像都从数据库加载(通过firebug调试)但jQuery滑块没有应用动画或滑动效果到它
当我删除图库中的data-ng-repeat =“图像并使用一些静态内容,即图像时,我得到了滑动效果.
这有什么问题.我认为Angular正在操纵我的DOM.这就是为什么我每次放置时都会遇到这个问题,即在我的滑块上使用一些角度属性.

注意:我对jQuery新闻有同样的问题,即jQuery InnerFade插件http://medienfreunde.com/lab/innerfade/
以下是innerFade的使用方法;

<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:
这是我的路线;

// 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回答的)对我有用.所以,这就是我所做的.我没有创建任何指令,但直接我将$timeout注入我的控制器,然后我做了以下操作;

$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);

它确实适用于Slider和InnerFade

Angular IS操纵你的dom,ng-repeat指令在有一个可以使用的列表时创建元素.因此,你需要在角度完成后调用.slides创建元素,因为该插件正在改变DOM本身.

这是一个指令,您可以根据数组的长度>来调用元素上的$.slides.它显示了使用额外的属性,如’start’来修改对幻灯片的调用.在这里,它检查$scope上的一个名为’images’的数组,并在链接阶段调用$timeout(),以便在创建DOM时完成角度调用.slidesjs().我不知道你使用了什么插件,所以我发现一个名为’slidesjs的插件看起来很相似. ‘这是一个吸血鬼:
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;
});

需要注意的一点是,它仍然只能被调用一次,因此如果您的图像列表得到更新,它将无法工作.为此,您可以在指令中创建内容……

翻译自:https://stackoverflow.com/questions/16899747/jquery-plugins-doesnt-work-well-with-angularjs

转载注明原文:jQuery插件与Angularjs不兼容