在 Angular JS 中初始化 jQuery 插件(RoyalSlider)
Posted
技术标签:
【中文标题】在 Angular JS 中初始化 jQuery 插件(RoyalSlider)【英文标题】:Initialising jQuery plugin (RoyalSlider) in Angular JS 【发布时间】:2014-07-19 00:56:08 【问题描述】:尝试将 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 也在那里,因为我也尝试过这个技巧,但无济于事。
【问题讨论】:
【参考方案1】:试试这个
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();
]);
【讨论】:
不幸的是,两者都不起作用,更不幸的是,控制台中没有任何线索知道出了什么问题。 好吧,再来一次试试这个 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(); ]); 所有选项都在添加 Restrict: "AEC" 的情况下工作,但控制台出现错误。Error: [$rootScope:inprog] $digest already in progress
好的,那么问题是没有限制。所以新的错误是因为我们使用了$scope.$apply()。你可以删除 $scope.$apply() 看看它是否仍然可以正常工作吗?
遇到同样的问题 - 您找到解决方案了吗?【参考方案2】:
我已经有 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)
.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">
【讨论】:
以上是关于在 Angular JS 中初始化 jQuery 插件(RoyalSlider)的主要内容,如果未能解决你的问题,请参考以下文章
Django:如何在 Jquery 中使用 $getJSON 或在 Angular.js 中使用 $http.get 接收 QuerySet?
使用 Angular JS 数据表在其中一列中添加 Jquery datepicker