jQuery插件与Angularjs不兼容

Question

我在我的项目中使用了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="image in gallery并使用一些静态内容即图像,我得到了滑动效果回来了.
这有什么问题.我认为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回答)适合我.所以,这就是我所做的.我没有创造任何directive但直接我注入$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);

它确实适用于for Slider和forInnerFade

Answer 1

 $(document).ready(function () {

在角度已将内容加载到页面之前触发.只有在角度加载内容后才能激活jQuery滑块脚本.这里的部分问题是angular不提供回调,$digest因此您没有要监听的事件.

内容加载 - >事件回调 - > ui构建,虽然在jQuery和标准的javascript思想中很常见,但它不是角度心态的一部分.幸运的是角度有一个非常强大的方法来处理这个问题.

您需要的是将jQuery幻灯片脚本转换为角度指令.然后它将成为角度处理空间的一部分并被实例化为角度摘要周期的一部分.

就像是

   <div id="slides" my-slideshow >
        <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>

祝好运!

使用innerfade的快乐示例时间(我还没有测试过,会尽快做到).首先,您的应用程序必须声明角度模块(如果尚未声明).ng-app="myModule".http://docs.angularjs.org/api/angular.module

(确保您的控制器也已连接!)

现在您可以在该模块上声明一个指令.哪个超酷.

angular.module('myModule').directive("innerFade", function () {
   var res = {
     restrict : 'C',
     link     : function (scope, element, attrs) {
           scope.$watch(attrs.innerFade, function(){             
               element.innerfade({
                  speed: 'slow',
                  timeout: 1000,
                  type: 'sequence',
                  containerheight: '1.5em'
               });
           });
        }
     };
  return res;
});

这种方式非常简单.该$watch函数将监视包含数据的范围部分.当更改(包括初始化)时,它将使用该指令触发innerfadejQuery函数element.我们也将'C'传递给restrict参数,所以这个自定义指令将是一个只有类的指令(我注意到你似乎喜欢这样).

 <ul class="inner-fade:innerData" >
      <li class="ng-repeat:fadeItem in innerData">{{fadeItem}}</li>
 </ul>

现在你所要做的就是将数据绑定到$scope.innerData你的控制器中(以你喜欢的方式绑定它,包括ajax),它就可以了.您甚至可以更改数据$scope.innerData,它将使用完整的jQuery荣耀进行更新.

Answer 2

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

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

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