0

我正在尝试将 carouFredSel 插件用于角度应用程序。此应用程序使用以下依赖项：

app.module('app', ['ngRoute', 'ngCookies', 'ngSanitize', 'ui.event', 'ui.keypress', 'ui.bootstrap.dialog', 'ui.bootstrap.carousel','ngTouch']);

我从这样的指令初始化插件：

app.directive('slider', function(){
          return {
              restrict: 'E',
              template: '<div ng-repeat="links in linkstack"><a href="{{links.url}}">{{links.text}}</a></div>',
              link: function(scope,element,attrs) {
                  scope.$watch("linkstack", function (val) {
                      if(val){
                          console.log(element);
                          element.caroufredsel({
                              width: 600,
                              responsive: true
                          });
                      }
                  });
              },
              controller: function ($scope, $element, $attrs) {
                  $scope.linkstack = [
                      {url: "/url1", text: "item 1"},
                      {url: "/url2", text: "item 2"},
                      {url: "/url3", text: "item 3"},
                      {url: "/url4", text: "item 4"},
                      {url: "/url5", text: "item 5"}
                  ];
              }
          }
      });

实现非常简单：

 <slider></slider>

问题是插件初始化后包装器有错误的内联指标但是控制台返回绝对准备好的“滑块”元素：

<div class="caroufredsel_wrapper" style="text-align: start; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 0px; height: 0px; margin: 0px; overflow: hidden;"><slider style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 0px; margin: 0px; width: 0px; height: 0px;"><!-- ngRepeat: links in linkstack --><div ng-repeat="links in linkstack" class="ng-scope"><a href="/url1" class="ng-binding">item 1</a></div><div ng-repeat="links in linkstack" class="ng-scope"><a href="/url2" class="ng-binding">item 2</a></div><div ng-repeat="links in linkstack" class="ng-scope"><a href="/url3" class="ng-binding">item 3</a></div><div ng-repeat="links in linkstack" class="ng-scope"><a href="/url4" class="ng-binding">item 4</a></div><div ng-repeat="links in linkstack" class="ng-scope"><a href="/url5" class="ng-binding">item 5</a></div></slider></div>

在窗口调整大小插件触发更新方法之后，一切都可以预测。请提出解决方案所在的建议。谢谢！

PS同样的问题是当我实施revolunet angular carousel时

此应用程序使用延迟承诺在身份验证过程后显示文档正文，即

<body data-ng-class="{ready: isAuthenthicationChecked}">

身体的 CSS 是：

body {
  overflow: hidden;
  &.ready {
    overflow: auto;
    .pageLoader {
      display: none;
    }
    .mainPageWrapper {
      display: block;
    }
  }
}

好吧，解决方案是：在 css 而不是“显示：块/无”中，我使用了“可见性：隐藏/可见”来避免折叠和指令更改也以提供适当的延迟：

.directive('linkCarousel', ['$rootScope', function($rootScope){
            return {
                template: '<div class="sliderContainer">' +
                        '<a class="prev" href="#" style="display: block;"></a>' +
                        '<a class="next" href="#" style="display: block;"></a>' +
                        '<div class="sliderBodyWrapper">' +
                        '<div class="sliderBody">' +
                        '<div ng-repeat="links in linkstack" class="item">' +
                        '<a href="{{links.url}}" onmousedown="return false;">{{links.text}}</a>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>',
                controller: function ($scope, $element, $rootScope) {
                    $scope.linkstack = [
                        {url: '/url1', text: 'item 1'},
                        {url: '/url2', text: 'item 2'},
                        {url: '/url3', text: 'item 3'},
                        {url: '/url4', text: 'item 4'},
                        {url: '/url5', text: 'item 5'},
                        {url: '/url6', text: 'item 6'},
                        {url: '/url7', text: 'Ordinary item 7'},
                        {url: '/url8', text: 'item 8'},
                        {url: '/url9', text: 'Very special item 9'},
                        {url: '/url10', text: 'item 10'},
                        {url: '/url11', text: 'item 11'},
                        {url: '/url12', text: 'item 12'}
                    ];
                },
                link: function(scope, element) {
                    scope.$watch('linkstack', function(value){
                        var val = value || null;
                        if(val){
                            $rootScope.globalModel.ready.then(function(){
                                var $carousel = element.find(".sliderBody");
                                $carousel.caroufredsel({
                                    width: '100%',
                                    height: 'auto',
                                    align: 'center',
                                    fx: 'directscroll',
                                    auto: false,
                                    circular: false,
                                    infinite: false,
                                    scroll: {
                                        wipe: true,
                                        easing: 'linear',
                                        duration: 650
                                    },
                                    mousewheel: true,
                                    swipe: {
                                        onMouse: true,
                                        onTouch: true
                                    },
                                    prev: element.find(".prev"),
                                    next: element.find(".next")
                                });
                            })
                        }
                    })
                }
            }
        }])
4

0 回答 0