BxSlider和角度JS

如果您正在使用角工作，也許你會要調用一些jQuery庫爲你做的東西有情況。通常的方法是調用頁面準備jQuery的功能：BxSlider和角度JS

$(function(){ 
    $(element).someJqueryFunction(); 
});

如果您element內容採用了棱角分明，比這種方法並不好，因爲我瞭解動態添加，你需要創建爲了一個自定義指令以實現此功能。

在我的情況下，我想加載<ul class="bxslider">元素上的bxSlider，但<ul>元素的內容應該使用角度ng-repeat指令加載。

圖片名稱使用REST服務從數據庫中收集的。

我打電話給我的指令，使用下面的代碼名爲startslider：

<div startslider></div>

我的自定義角度指令是：（pictures是在$scope從我的控制器，它被稱爲REST服務傳遞的變量）

application.directive('startslider', function() { 
    return { 
     restrict: 'A', 
     replace: false, 
     template: '<ul class="bxslider">' + 
        '<li ng-repeat="picture in pictures">' + 
        '<img ng-src="{{siteURL}}/slide/{{picture.gallery_source}}" alt="" />' 
        '</li>' + 
        '</ul>', 


     link: function (scope, elm, attrs) {//from angular documentation, the link: function should be called in order to change/update the dom elements 
      elm.ready(function() { 
       elm.bxSlider({ 
        mode: 'fade', 
        autoControls: true, 
        slideWidth: 360, 
        slideHeight:600 
       }); 




      }); 
     } 
    }; 
});

至於結果，我得到的所有從數據庫中的圖片顯示我的屏幕上，但沒有bxSlider加載（所有圖片顯示一個波紋管等）。

請注意，bxSlider工作，因爲當我打電話$(element).bxSlider();手動編寫的代碼，滑塊負荷。

這是怎麼發生的？

來源

2014-03-30 MrD

編輯：我覺得你的問題是試圖通過呼籲HTMLUListElement滑塊，這是一個對象而引起的。

要調用的DOM元素上的滑塊，你可以使用$("." + $(elm[0]).attr('class'))將使用現有的bxslider類，或者更好的分配一個ID，您<div startslider id="slideshow"></div>並呼籲像$("." + $(elm[0]).attr('id'))

 elm.ready(function() {  
      $("." + $(elm[0]).attr('class')).bxSlider({ 
       mode: 'fade', 
       autoControls: true, 
       slideWidth: 360, 
       slideHeight:600 
      }); 
     });

全碼： http://jsfiddle.net/z27fJ/

來源

2014-03-30 13:10:00

當我粘貼示波器$ apply（function（）{ scope.pictures = scope.startslider; }）;我得到以下錯誤：錯誤：[$ rootScope：inprog] http://errors.angularjs.org/1.3.0-beta.3/$rootScope/inprog?p0=%24digest – MrD

所有圖片加載但一個波紋管其他，就像沒有BxSlider一樣。真的不知道發生了什麼。 – MrD

你檢查了jsfiddle嗎？那裏有一個工作的例子。 –

不是我的解決方案，但我想我會把它傳遞下去。

我喜歡這個解決方案的最佳（利用指令控制器）

// slightly modified from jsfiddle 

// bxSlider directive 
controller: function() {}, 
link: function (scope, element, attrs, controller) { 
    controller.initialize = function() { 
     element.bxSlider(BX_SLIDER_OPTIONS); 
    }; 
} 

// bxSliderItem directive 
require: '^bxSlider', 
link: function(scope, element, attrs, controller) { 
    if (scope.$last) { 
     controller.initialize(); 
    } 
}

http://jsfiddle.net/CaioToOn/Q5AcH/8/

替代，類似的解決方案，使用事件（我不喜歡）

Jquery bxslider not working + Angular js ng-repeat issue

根問題

你不能調用範圍。$適用於摘要週期的中間。
在編譯模板之前，您無法觸發bxSlider（）。
最後，你需要等待模板調用bxSlider（）之前被編譯並提供

Calling a function when ng-repeat has finished

來源

2015-06-16 23:54:46 chemoish

這是指令

.directive('slideit', function() { 
return function (scope, elm, attrs) { 
    var t = scope.$sliderData; 

    scope.$watch(attrs.slideit, function (t) { 
     var html = ''; 
     for (var i = 0; i <= t.length-1; i++) { 
      html += '<li><ul class="BXslider"><li class="BXsliderHead"><img src="'+scope.$imageUrl+'flight/'+t[i].code+'.gif" />'+t[i].name+'</li><li class="BXsliderChild">'+t[i].noneStop+'</li><li class="BXsliderChild">'+t[i].oneStop+'</li><li class="BXsliderChild">'+t[i].twoStop+'</li></ul></li>'; 
     } 
     angular.element(document).ready(function() { 
      $("#" + $(elm[0]).attr('id')).html(html).bxSlider({ 

       pager:false, 
       minSlides: 3, 
       maxSlides: 7, 
       slideWidth: 110, 
       infiniteLoop: false, 
       hideControlOnEnd: true, 
       auto: false, 
      }); 
     }); 
    }); 
}; 
});

這是在查看HTML

<div ui-if="$sliderData"> 
     <ul id="experimental" slideit="$sliderData"></ul> 
    </div>

and t他重要的部分是js文件

<script src="/yii-application/frontend/web/js/libraries/angular/angular.min.js"></script> 
    <script src="/yii-application/frontend/web/js/libraries/angular/angular-ui.js"></script> 
<script src="/yii-application/frontend/web/js/libraries/jquery/jquery-1.11.3.min.js"></script> 
<script src="/yii-application/frontend/web/js/libraries/flex/jquery.bxslider.min.js"></script> 
<script src="/yii-application/frontend/web/assets/e3dc96ac/js/bootstrap.min.js"></script> 
<script src="/yii-application/frontend/web/js/libraries/jquery-ui/jquery-ui.min.js"></script> 
<script src="/yii-application/frontend/web/js/searchResult.js"></script> 
<script src="/yii-application/frontend/web/js/Flight.js"></script>

的依賴，不要忘了把UI模塊 var app = angular.module('myApp', ['ui']);

這是我使用bxslider !!!!也許可以解決你的問題

來源

2015-08-10 05:57:55 mohsen

BxSlider和角度JS

回答

相關問題