Javascript 自定义owl转盘指令

我试图将普通的jQuery自己的旋转木马转换为Angular指令。它不适合我，显示一些角度误差，我找不到问题所在

控制器

HTML翡翠

指示

错误

语法错误：从[{4}]开始的表达式[{{]的第2列中的标记“{”键无效

---

您的问题出现在这一行$scope.$eval$el.attr'data-options'；。这会产生一个解析语法错误。您有两个选项可以修复它：

选项1：从link指令函数的ATTR参数获取选项

选项2：使用范围单向绑定获取选项

正如您所看到的，我将html数据选项属性作为选项，这是因为angularjs指令将忽略所有html元素和属性名称中的data-*前缀

更多信息：

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

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

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

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