In my sliding menu, each menu item contains a carousel with two items. I am trying to make the first carousel item show after closing and reopening the menu, or by clicking a button outside of the list on the menu page.
This is my current setup:
<ons-template id="menu.html">
<ons-page>
<span style = "text-align:center;width:30dp;margin:25%;">Presentations</span>
<ons-list id ="list" style="padding:0px;" ng-controller="ItemController">
<ons-list-item ng-repeat="item in local" style="padding:0;">
<ons-carousel swipeable auto-scroll auto-refresh initial-index="0" style="height: 100%;width: 100%; position: absolute;">
<ons-carousel-item style="padding:0;">
<ons-button modifier = "quiet" ng-click="menu.close();customSetMainPage(item.id);">
{{item.name}}
</ons-button>
</ons-carousel-item>
<ons-carousel-item style ="text-align: center;">
<ons-button ng-click="deletepresentation(item.id);local.splice($index, 1);" >
Remove
<ons-icon icon="ion-trash-a"/>
</ons-button>
</ons-carousel-item>
</ons-carousel>
</ons-list-item>
</ons-list>
<p>
<ons-button modifier = "small" style="margin-left: 25%;" id = "add"
onclick="
addPresentation();
menu.closeMenu();
if (runtime.diaginit == false) {
runtime.diaginit=true;
ons.createDialog('dialog.html').then(function(dialog) {dialog.show();});}
else {dialog.show();}
"
>
new presentation
</ons-button>
</p>
</ons-page>
</ons-template>
EDIT :
I attempted to proceed as follows: This line
angular.element(document.getElementById('list')).scope().itemToDefault();undefined is not a function (evaluating '$scope.carousel[index].first()')
ons.ready(function() {
menu.setMainPage('first.html');
menu.on('postclose', function() {
ons.compile(document.getElementById("carousel"));
});
menu.on('preclose', function() {
angular.element(document.getElementById('list')).scope().itemToDefault();
});
});
var application = angular.module('app', ['onsen']);
application.controller('ItemController',function($scope){
$scope.local = [];
$scope.itemToDefault = function (){
var c = $scope.carousel;
for (var index in $scope.carousel) {
if( $scope.carousel.hasOwnProperty( index ) ) {
$scope.carousel[index].first();
}
}
};
});