Javascript 如何在angular js指令中定义owl转盘回调函数?
我面临着一个与角js猫头鹰旋转木马的问题。我正在使用带有angular js的owl旋转木马,并为其制作一个指令。但是,当我使用OWLCarousel的回调时,它在控制台中显示该函数未定义 代码如下: 有棱角的 HTMLJavascript 如何在angular js指令中定义owl转盘回调函数?,javascript,jquery,angularjs,owl-carousel,Javascript,Jquery,Angularjs,Owl Carousel,我面临着一个与角js猫头鹰旋转木马的问题。我正在使用带有angular js的owl旋转木马,并为其制作一个指令。但是,当我使用OWLCarousel的回调时,它在控制台中显示该函数未定义 代码如下: 有棱角的 HTML {{challenge.challenge} 牛顿定律 {{挑战。学生计数}学生接受了。 接受 挑战 回调_init显示未定义。这段代码有什么问题?您是否尝试过初始化:函数(事件){…}?它位于html的数据选项中。请检查html的“wrap owlcarousel”部
{{challenge.challenge}
牛顿定律
{{挑战。学生计数}学生接受了。
接受
挑战
回调_init显示未定义。这段代码有什么问题?您是否尝试过初始化:函数(事件){…}?它位于html的数据选项中。请检查html的“wrap owlcarousel”部分,我通过angular.element获得它,所以它会工作?如果我使用onInitialized:function(event){…},它会给出语法错误。这是因为我以前在data-options.Got中使用过大括号“{}”。我必须用$scope在控制器中定义它,然后它才能工作。您是否尝试过初始化:function(event){…}?它在html的数据选项中。请检查html的“wrap owlcarousel”部分,我通过angular.element获得它,所以它会工作?如果我使用onInitialized:function(event){…},它会给出语法错误。这是因为我以前在data-options.Got中使用过大括号“{}”。我必须用$scope在控制器中定义它,然后它才能工作。
angular.module('myApp').directive('wrapOwlcarousel', function () {
var linker = function postLink(scope,element,attr){
var module = angular.element(element).attr('module');
var options = angular.element(element).attr('data-options');
scope.$watch(module, function(){
if ( scope.challengesData && scope.challengesData.challenges && scope.challengesData.challenges.length > 0 ){
angular.element(element).owlCarousel(options);
}
});
var callback_init = function(event) {
console.log('Event is', event);
}
}
return{
restrict : 'E',
link: linker
}
});
<div class="col-md-12 col-sm-12 col-lg-12 col-xs-12 testimonial-wrapper-main-box">
<wrap-owlcarousel class="owl-carousel" module="challengesData.challenges" data-options="{
autoPlay: 5000,
stopOnHover: true,
onInitialized : callback_init,
slideSpeed : 300,
paginationSpeed : 400,
navigation: true,
navigationText : ['<i class=\'fa fa-angle-left\'></i>','<i class=\'fa fa-angle-right\'></i>'],
singleItem : true}">
<div class="media social-feed row" ng-repeat="challenge in challengesData.challenges">
<div class="col-md-8 col-sm-8 media-body-wrapper">
<span class="pull-left testimonial-image">
<i class="fa fa-trophy testimonial-trophy-icon"></i>
</span>
<div class="media-body">
<p class="challenge-txt">{{challenge.challenge}}</p>
<p class="challenge-txt-big">Newton's Law</p>
<p class="challenge-txt">
<span class="challenge-count">{{challenge.student_count}}</span> students accepted it.
</p>
</div>
</div>
<div class="col-md-4 col-sm-4 testimonial-button-wrapper">
<button class="pull-left testimonial-button">Accept
challenge</button>
</div>
</div>
</wrap-owlcarousel>
</div>