本文介绍了在 Angular JS 中初始化 jQuery 插件 (RoyalSlider)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
尝试加载 RoyalSlider 作为指令.这是我的指令,虽然我不确定为什么在第一次加载时有效,但在后续加载时无效:
app.directive('royalSlider', ['$timeout', function($timeout) {$(".royalSlider").royalSlider({键盘导航启用:真,箭头导航:真实,arrowsNavHideOnTouch: 真,imageScaleMode: '填充',幻灯片间距:0});}]);
错误:
TypeError: 无法读取未定义的属性编译"
假设问题是在所有内容完成后加载,我将其更改为:
app.directive('royalSlider', ['$timeout', function($timeout) {返回 {链接:函数($scope,元素,属性){$scope.$on('$viewContentLoaded', function () {$(".royalSlider").royalSlider({键盘导航启用:真,箭头导航:真实,arrowsNavHideOnTouch: 真,imageScaleMode: '填充',幻灯片间距:0});})}}}]);
然后什么也没发生.$timeout 也在那里,因为我也尝试过这个技巧,但无济于事.
解决方案
我已经有 2 种情况,指令和服务/工厂不能很好地发挥作用.
场景是我有(有)一个指令,该指令具有服务的依赖注入,并且从指令中我要求服务进行 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).成功(功能(数据){//等,映射到selectedArray如果(属性名称){targetObjext[propertyName] = selectedArray;}别的 {targetObjext['selectedArray'] = selectedArray;}如果(回调){打回来();}});};}]);app.service('slidersService', ['$log', '$http', 'AjaxService', function ($log, $http, AjaxService) {var me = this;me.initRoyalSlider = 函数(url,元素,arrayName,sliderOptions,splitObject){我[数组名] = [];var successCallback = 函数滑块Service_successCallback() {setTimeout(函数滑块Service_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 = 滑块服务;滑块服务.initRoyalSlider($attrs.royalSliderUrl, element, arrName, options, $attrs.splitObject);});
和 HTML
Trying to load the RoyalSlider as a Directive. Here's my directive, which works though I'm not sure exactly why, on first load but not on subsequent loads:
app.directive('royalSlider', ['$timeout', function($timeout) {
$(".royalSlider").royalSlider({
keyboardNavEnabled: true,
arrowsNav: true,
arrowsNavHideOnTouch: true,
imageScaleMode: 'fill',
slidesSpacing: 0
});
}]);
with the error:
TypeError: Cannot read property 'compile' of undefined
Assuming the issue is loading when all content is finished, I changed it to this:
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
});
})
}
}
}]);
And Nothing happens. $timeout is also in there because I've tried that trick too, to no avail.
解决方案
I already have 2 situations where directives and services/factories didn't play well.
The scenario is that I have (had) a directive that has dependency injection of a service, and from the directive I ask the service to make an ajax call (with $http).
In the end, in both cases the ng-repeat did not file at all, even when I gave the array an initial value.
I even tried to make a directive with a controller and an isolated-scope. Only when I have moved everything to a controller then it worked like magic. One of them was the royal slider.
Here is my code
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);
});
And the 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">
这篇关于在 Angular JS 中初始化 jQuery 插件 (RoyalSlider)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文