2016-10-03 6 views
0

Init угловой гладкий слайдер на pagePush

<ons-template id="atendimento.html"> 
 
    <ons-page id="atendimento" ng-controller="MyCtrl" > 
 
    <ons-toolbar> 
 
     <section class="left"> 
 
     <ons-toolbar-button onclick="fn.open()"> 
 
      <ons-icon icon="menuic"></ons-icon> 
 
     </ons-toolbar-button> 
 
     </section> 
 
     <section class="center"> 
 
     Atendimento 
 
     </section> 
 
    </ons-toolbar> 
 

 
    <section class="showConsultores" ng-app="MyApp" >  
 
     <section class="slick-container"> 
 
     <slick infinite=true slides-to-show=3 slides-to-scroll=3> 
 
      <section class="slick-item" ng-repeat="image in images"> 
 
      <div><img src="{{ image.url }}" /></div> 
 
      </section> 
 
     </slick> 
 
     </section> 
 
    </section><!-- showCOnsultores --> 
 

 
    </ons-page> 
 
</ons-template>

У меня есть пятно ползунок на ONS-шаблоне, и мне нужно инициализировать, когда этот шаблон/страница выталкивается. Как я могу это сделать? У меня есть шаблон и DIV в него с нг-приложение = «MyApp» и нг-контроллер = «MyCtrl»

Вот что я сделал уже:

var app = angular.module('MyApp', ['slickCarousel']) 
 
    .controller('MyCtrl', MyCtrl); 
 

 
function MyCtrl($http, $scope, $interval) { 
 

 
    $scope.images = [{ 
 
    url: 'http://1.gravatar.com/avatar/7b87e6452c01724c8e917c4e08dce2f7?s=90&d=mm&r=g' 
 
    }, { 
 
    url: 'http://www.guiadafarmacia.com.br/images/resized/images/screen_shot_2015-04-30_at_3_90_90.png' 
 
    }, { 
 
    url: 'http://www.guiadafarmacia.com.br/images/resized/images/screen_shot_2015-04-30_at_3_90_90.png' 
 
    }, { 
 
    url: 'http://www.guiadafarmacia.com.br/images/resized/images/screen_shot_2015-04-30_at_3_90_90.png' 
 
    }, { 
 
    url: 'http://www.guiadafarmacia.com.br/images/resized/images/screen_shot_2015-04-30_at_3_90_90.png' 
 
    }, { 
 
    url: 'http://www.jmensura.com.br/img/call_center.jpg' 
 
    }]; 
 
}

+0

Не могли бы вы предоставить свой шаблон (HTML)? – nikjohn

+0

конечно. Сообщение обновлено! –

ответ

0

из документации модуля он выглядит как обычный ng-if используется для инициализации карусели:

<slick ng-if="numberLoaded"> 
    <div ng-repeat="i in number"> 
     <div class="" ng-include="'tpl.html'"></div> 
    </div> 
</slick> 

Вы можете установить numberLoaded (или какой-либо другой флаг триггера) на функцию разрешения состояния/маршрута. Не уверен, что это поможет