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中的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);

它確實適用於Slider和InnerFade

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函數將監視包含數據的范圍部分。 當更改（包括初始化）時，它將使用該指令觸發element上的innerfade jQuery函數。 我們也將'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本身。

這是一個指令，您可以根據數組長度> 0的時間在元素上調用$.slides 。它顯示使用額外的屬性，如'start'來修改對幻燈片的調用。 在這里，它檢查$ scope上的一個名為'images'的數組，並在鏈接階段調用$timeout() ，以便在創建DOM時完成角度調用.slidesjs() 。 我不知道你使用了什么插件，所以我發現了一個名為' 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;
});

需要注意的一點是，它仍然只能被調用一次，因此如果您的圖像列表得到更新，它將無法工作。 為此，您可以在指令中創建內容......

Answer 3

一些想法
1）我的猜測是你的主應用頁面有一些順序錯誤。 在 angularjs 之后你有jQuery包含嗎？ 我假設你正在使用ng-repeat指令？

2）將$更改為jQuery

3）將document.ready腳本放在主頁面中......也考慮將其替換為

 window.onload=function(){} 

如果你能顯示主頁面和視圖的代碼，我相信我可以調試。

Answer 4

向#slides添加指令

app.directive("slideDirective", function () {
     return function (scope, element, attrs) {
         // Dom
         element.slides({
             preload: true,
             preloadImage: '/content/images/theme/loading.gif',
             play: 5000,
             pause: 2500,
             hoverPause: true
         });
     }
}

Answer 5

正如所說：“jQuery滑塊腳本只應在angular加載內容后才能激活”所以你可以等到它加載之后，然后你的jQuery代碼就會開始運行。

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