我想使用带 Angular 响应式 slider 插件,但我不知道如何解决这个问题。
插入的 html 看起来像这样:
<ul class="rslides">
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>
并且 courasel 必须以标准方式初始化:
<script>
$(function() {
$(".rslides").responsiveSlides();
});
</script>
我应该如何使用 Angular Directive(指令)来实现它。
我的 Controller 看起来像这样:
angular.module('kingaFrontend')
.controller('FeaturedCtrl', function ($scope, kingaApi) {
kingaApi.Photo.getFeaturedPhotos()
.success(
function (response) {
$scope.photos = response.photos
})
.error(function (response){
switch(response && response.code) {
default:
console.log("error", response )
// $scope.errors.usernameErrors.push('An error occurred.');
}
});
});
最佳答案
如果您需要为 jquery 插件使用单独的指令,请查看此内容。
angular.module('kingaFrontend').directive('slider',function() {
var linker = function(scope, element, attr) {
scope.$watch('photos', function () {
$(".rslides").responsiveSlides();
});
};
return {
restrict: "A",
link: linker
}
});
并添加 slider
指令即可。
<ul class="rslides" slider>...
更新
您可以修改它以更有效地重用该指令。
attr data-slider-class-selector
插件要初始化的类名。
attr data-slider-refresh-on-watch
$scope
属性名称(如果此属性更改插件将再次初始化)。在这种情况下, $scope.photos
会在一段时间后(ajax 调用后)发生变化,因此您需要在 ajax 调用后初始化插件。这样您就可以观看 photos
from 指令,并在 photos
可用后初始化插件。
<ul class="rslides" data-slider-class-selector="rslides" data-slider-refresh-on-watch="images" slider>
然后在指令中获取这些新属性值并使用它们,
app.directive('slider', function() {
var linker = function(scope, element, attr) {
// get the value of data-slider-class-selector
var selector = attr.sliderClassSelector;
// get the value of data-slider-refresh-on-watch
var watchSelector = attr.sliderRefreshOnWatch;
scope.$watch(watchSelector, function() {
$('.'+selector).responsiveSlides({
auto: true,
pager: true,
speed: 500,
timeout: 2000,
maxwidth: 540
});
});
};
return {
restrict: "A",
link: linker
}
});
这是一个 simple demo Plunker
关于javascript - 使用带 Angular 外部库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29405648/