Question

我尝试将普通的jQuery自带轮播转换为Angular Directive。它对我不起作用，显示一些我无法找到问题的角度误差。

控制器

$scope.defaultsCarousel = {
  'items': 4,
  'itemWidth': 300,
  'itemsDesktop': [1260, 3],
  'itemsTablet': [930, 2],
  'itemsMobile': [620, 1],
  'navigation': true,
  'navigationText': false
};

HTML（Jade）

custom-carousel(data-options="{{ defaultsCarousel }}", productid="#pl-1")

指令

myApp.directive('customCarousel', function(){
 function nextSlide(e) {
    e.preventDefault();
    e.data.owlObject.next();
 };

 function prevSlide(e) {
    e.preventDefault();
    e.data.owlObject.prev();
 };

 return{
    restrict: 'E',
    scope: {},
    link: function($scope, el, attrs){
        var options = $scope.$eval($(el).attr('data-options'));
        var product_id = attrs.productid;
        console.log(product_id);
        $(product_id).owlCarousel(options);
        var owl = $(product_id).data('owlCarousel');
        $(product_id).parent().find('.slide-control.right').on('click', {owlObject: owl}, nextSlide);
        $(product_id).parent().find('.slide-control.left').on('click', {owlObject: owl}, prevSlide);
     }
}

错误

语法错误：从[{4}]开始的表达式[{{]的第2列处的令牌'{'无效键。

Answer 1

您的问题出在此行$scope.$eval($(el).attr('data-options'));。这会产生解析语法错误。您有两种方法可以解决它：

选项1：从链接指令功能的attrs参数中获取选项。（PLUNKER）

app.directive('customCarousel', function() {
  return {
    restrict: 'E',
    link: function(scope, el, attrs) {

      var options = angular.fromJson(attrs.options);
      var product_id = attrs.productid;

      //..Rest of your logic
    }
  }
});

选项2：使用范围单向绑定获取选项。（PLUNKER）

app.directive('customCarousel', function() {
  return {
    restrict: 'E',
    scope: {
        options: '@',
        productid: '@'
    },
    link: function(scope, el, attrs) {

      var options = angular.fromJson(scope.options);
      var product_id = scope.productid;

      //..Rest of your logic
    }
  }
});

正如您所看到的，我将html data-options属性视为options。这是因为angularjs指令将忽略所有HTML元素和属性名称中的data-*前缀。

更多信息：

自定义猫头鹰旋转木马指令

1 个答案: