[英]Initialising jQuery plugin (RoyalSlider) in Angular JS
尝试将 RoyalSlider 作为指令加载。 这是我的指令,虽然我不确定为什么在第一次加载时有效,但在后续加载时无效:
app.directive('royalSlider', ['$timeout', function($timeout) {
$(".royalSlider").royalSlider({
keyboardNavEnabled: true,
arrowsNav: true,
arrowsNavHideOnTouch: true,
imageScaleMode: 'fill',
slidesSpacing: 0
});
}]);
有错误:
TypeError: Cannot read property 'compile' of undefined
假设问题是在所有内容完成后加载,我将其更改为:
app.directive('royalSlider', ['$timeout', function($timeout) {
return {
link: function ($scope, element, attrs) {
$scope.$on('$viewContentLoaded', function () {
$(".royalSlider").royalSlider({
keyboardNavEnabled: true,
arrowsNav: true,
arrowsNavHideOnTouch: true,
imageScaleMode: 'fill',
slidesSpacing: 0
});
})
}
}
}]);
什么也没有发生。 $timeout 也在那里,因为我也尝试过这个技巧,但无济于事。
尝试这个
app.directive('royalSlider', ['$timeout', function($timeout) {
return {
link: function ($scope, element, attrs) {
$scope.$apply($(".royalSlider").royalSlider({
keyboardNavEnabled: true,
arrowsNav: true,
arrowsNavHideOnTouch: true,
imageScaleMode: 'fill',
slidesSpacing: 0
}));
}
}
}]);
或者
app.directive('royalSlider', ['$timeout', function($timeout) {
return {
link: function ($scope, element, attrs) {
$(".royalSlider").royalSlider({
keyboardNavEnabled: true,
arrowsNav: true,
arrowsNavHideOnTouch: true,
imageScaleMode: 'fill',
slidesSpacing: 0
});
$scope.$apply();
}
}
}]);
我已经有两种情况,指令和服务/工厂不能很好地发挥作用。
场景是我有(有)一个指令,该指令具有服务的依赖注入,并且从指令中我要求服务进行 ajax 调用(使用 $http)。
最后,在这两种情况下,ng-repeat 根本没有归档,即使我给了数组一个初始值。
我什至尝试使用控制器和隔离范围来制定指令。 只有当我将所有东西都移动到控制器时,它才能像魔术一样工作。 其中之一是皇家滑块。
这是我的代码
app.service('AjaxService', ['$log', '$http', function ($log, $http) {
var me = this;
me.CallHttpAjaxAndMapSearch = function (url, targetObjext, propertyName, callback, splitObject) {
$http.get(url)
.success(function(data){
//etc., mapping to selectedArray
if (propertyName) {
targetObjext[propertyName] = selectedArray;
}
else {
targetObjext['selectedArray'] = selectedArray;
}
if (callback) {
callback();
}
});
};
}]);
app.service('slidersService', ['$log', '$http', 'AjaxService', function ($log, $http, AjaxService) {
var me = this;
me.initRoyalSlider = function (url, element, arrayName, sliderOptions, splitObject) {
me[arrayName] = [];
var successCallback = function slidersService_successCallback() {
setTimeout(function slidersService_successCallback_Timeout() {
$log.log('setTimeout for ' + arrayName);
element.royalSlider(sliderOptions);
}, 0);
};
AjaxService.CallHttpAjaxAndMapSearch(url, me, arrayName, successCallback, splitObject);
};
}]);
app.controller('royalSlider', function ($scope, $attrs, $log, slidersService) {
var arrName = $attrs.royalSlider;
var options = JSON.parse($attrs.royalSliderOptions);
var element = $attrs.$$element;
$scope.svc = slidersService;
slidersService.initRoyalSlider($attrs.royalSliderUrl, element, arrName, options, $attrs.splitObject);
});
和 HTML
<div class="slides royalSlider rsMinW "
ng-controller="royalSlider"
royal-slider="mainSlider"
royal-slider-options='{"loop":true,"autoPlay":{"enabled":true,"pauseOnHover":true,"delay":3000},"arrowsNav":false,"controlNavigation":"bullets"}'
royal-slider-url="/_api/search/query?bla bla">
<div ng-repeat="slide in svc.mainSlider">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.