Question

这让我疯狂，第一个角度滑板不起作用，但第二个很好，任何想法发生了什么？

我创建了一个plunkr（以防有人在将来寻找一个例子），但我的问题很奇怪，因为在我的代码/ realproject中没有工作所以我不知道到底发生了什么，无论如何！这是plunkr：http://plnkr.co/edit/URIbhoVpm1OcLSQqISPs?p=preview

我认为这个问题与DOM有关，因为在旋转木马渲染之前可能需要创建html，我不知道...... :(

这是结果： https://db.tt/noc0VgGU

路由器：

(function() {
  'use strict';

  angular
    .module('mgxApp.landing')
    .config(configFunction);

  configFunction.$inject = ['$routeProvider'];

  function configFunction($routeProvider) {
    $routeProvider.when('/', {
      templateUrl: 'app/landing/landing.html',
      controller: 'homeCtrl',
      controllerAs: 'hC'
    });
  }

})();

控制器：

(function() {
    'use strict';

    angular
        .module('mgxApp.landing')
        .controller('homeCtrl', homeCtrl);

    homeCtrl.$inject = ['modalFactory', 'channelFactory'];

    function homeCtrl(modalFactory, channelFactory) {
        var hC = this;
        hC.openAuthModal  = modalFactory.openAuthModal;
        hC.activeChannels;

        channelFactory.allActiveChannels().then(function(activechannels){
            console.log(activechannels);
            hC.activeChannels = activechannels;
        });

        hC.w = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

        hC.breakpoints = [
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
        }, {
            breakpoint: 480,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1
            }
        }
       ];
    }
})();

HTML视图：

// NOT WORKING
      <slick class="slider single-item" responsive="hC.breakpoints" slides-to-show=3 slides-to-scroll=3>
        <div ng-repeat="channel in hC.activeChannels">
          {{channel.get("username")}}
        </div>
      </slick>
// Working fine
      <slick class="slider single-item" current-index="index" responsive="hC.breakpoints" slides-to-show=3 slides-to-scroll=3>
        <div ng-repeat="i in hC.w">
          <h3>{{ i }}</h3>
        </div>
      </slick>

工厂和承诺：

(function () {
    'use strict';

    angular
        .module('mgxApp.channel')
        .factory('channelFactory', channelFactory);

    channelFactory.$inject = ['$rootScope', '$q'];

    function channelFactory($rootScope, $q) {

        var service = {
            allActiveChannels       : allActiveChannels
        };

        return service;

        function allActiveChannels() {
            var deferral = $q.defer();
            var User = Parse.Object.extend("_User");
            var query = new Parse.Query(User).limit(10);
            query.find({
                success: function(users) {
                    console.log(users);
                    /*for (var i = 0; i < users.length; i++) {
                     console.log(users[i].get("username"));
                     }*/
                    deferral.resolve(users);
                },
                error: function(error) {
                    console.warn(error);
                    deferral.reject();
                }
            });
            return deferral.promise;
        }
    }
})();

Answer 1

我的工作代码

   <div  tmob-slick-slider sliderData=""  dynamicDataChange="true"   class="utilHeightImg marqueeContainer">    
       <slick id="productCarousel"  class="slider"   settings="vm.slickAccessoriesConfig"  data-slick='{"autoplay   ": true, "autoplaySpeed": 4000}'>
        <!-- repeat='image' -->

        <div ng-repeat="slideContent in vm.slides track by $index" >
          <div bind-unsafe-html="slideContent" ></div>
        </div>

        <!-- end repeat -->
      </slick>
    </div>

你必须写一个指令来重新初始化滑块

angular.module('tmobileApp')
  .directive('tmobSlickSlider',['$compile',function ($compile) {
    return {
      restrict: 'EA',
      scope: true,
      link: function (scope, element, attrs) {



         scope.$on('MarqueesliderDataChangeEvent', function (event, data) {
          $compile(element.contents())(scope);
        });  


      }
    };
  }]);

将此内容写入您的控制器

hc.selectView=false; //   make this hc.selectView=true when your promise get resolve
    $scope.$watch('hc.selectView', function(newValue, oldValue) {
        $scope.$broadcast('MarqueesliderDataChangeEvent');
    });

Answer 2

我最终使用了这个解决方案： Angular-slick ng-repeat $http get

我建议你在光滑的元素上使用ng-if。只有通过检查数据长度才能存在数据时才会加载slick指令。

标记

<slick ng-if="ctrl.products.length">
    <div ng-repeat="product in ctrl.products">
       <img ng-src="{{product.image}}" alt="{{product.title}}"/>
    </div>
</slick>

使用诺言时，角度光滑的旋转木马不工作

2 个答案: