我正在尝试在angularjs中使用部分jquery插件。
指令:
app.directive('slideit',function() {
return function(scope, elm, attrs) {
elm.bxSlider({
adaptiveHeight: true,
mode: 'fade'
});
};
});
HTML:
<div id="sliderwrapper" >
<ul class="slider" slideit>
<li ng-repeat="image in dealer.images"><img ng-src="{{image}}" alt="" /></li>
</ul>
</div>
输出显示,bxSlider()在指令上成功运行。但是不会触及列表和/或标签。只是使用普通的AngularJS代码而不是jQuery插件。
我做错了什么?
答案 0 :(得分:2)
我认为问题在于时机问题。在呈现列表之前调用“slideit”指令,然后由ngRepeat再次重新绘制它,bxSlider甚至不怀疑这种情况发生了。
只是为了验证这个假设(不要在生产中使用它,因为它非常难看,如果你的模型发生变化,甚至可能不起作用)试试:
app.directive('slideit',function() {
return function(scope, elm, attrs) {
setTimeout(function() {
elm.bxSlider({
adaptiveHeight: true,
mode: 'fade'
});
}, 100);
};
});
这里有一个更大的问题:你试图用Angular和JQuery“编译”HTML,但它们不一定兼容。为了避免冲突,我建议在你的指令中手动渲染列表,然后在动态构造的DOM上调用bxSlider。它不漂亮,但它应该更稳定。例如:
<ul slideit="dealer.images"></ul>
指令:
app.directive('slideit',function() {
return function(scope, elm, attrs) {
scope.$watch(attrs.slideit, function(images) {
var html = '';
for (var i = 0; i < images.length; i++) {
html += '<li><img ng-src="' + images[i] + '" alt="" /></li>';
}
elm[0].innerHTML = html;
elm.bxSlider({
adaptiveHeight: true,
mode: 'fade'
});
});
};
});
(我没有测试过,这只是一个想法)
答案 1 :(得分:1)
这很有效。它在指令中有ng-repeat
。 bxSlider
开始于元素的ready()
。
app.directive('slideit',function() {
return {
restrict: 'A',
replace: true,
scope: {
slideit: '='
},
template: '<ul class="bxslider">' +
'<li ng-repeat="slide in slides">' +
'<img ng-src="{{slide.src}}" alt="" />' +
'</li>' +
'</ul>',
link: function(scope, elm, attrs) {
elm.ready(function() {
scope.$apply(function() {
scope.slides = scope.slideit;
});
elm.bxSlider({
adaptiveHeight: true,
mode: 'fade'});
});
}
};
});
<强> HTML:强>
<div slideit="images"></div>
修改:这是plnkr。
答案 2 :(得分:0)
想出来:
添加以下指令:
app.directive("mySlider", function() {
return {
restrict: 'E',
replace: true,
scope: true,
template: '<ul class="slider"><li check-last ng-repeat="image in dealer.images"><img ng-src="{{image}}" alt="" /></li></ul>'
};
});
app.directive('checkLast', function () {
return function (scope, element, attrs) {
//console.log(scope.$position);
if (scope.$last=== true) {
element.ready(function () {
$('.slider').bxSlider({
mode: 'fade',
pager: false
});
})
}
}
});
答案 3 :(得分:0)
只保持文件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/recordata/country.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>
如下!!!!