如何在angular js指令中定义一个owl carousel回调函数?

时间:2015-09-18 09:44:57

标签: javascript jquery angularjs owl-carousel

我正面临角js owl-carousel的问题。我正在使用带角度js的猫头鹰旋转木马并为它做出指示。但是当我使用owl-carousel的回调时,它在控制台中显示该函数未定义。

以下是代码:

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
    }
});

HTML

<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>

callback_init显示未定义。这段代码有什么问题?

0 个答案:

没有答案