onsenUI2とangularJS1でハイブリットアプリを作っているのですが
ジェスチャーの挙動ではまっています。
ng-repeatでliタグをループしてボタンをタップすると
liタグが回転するというUIを作っているのですが、その回転はうまくいってますが
ジェスチャーで左にスワイプするとliが回転しません。
同一のtapButtonを呼び出していて呼び出されていることも確認しているのですが、
なぜかジェスチャーだけ回転しない状態です
どうしてなのかわかる方教えてください
<ons-page ng-controller="TestController"> <h1 align="center">Animated Circle Menu Demo</h1><div class="jquery-script-ads" align="center"> <ons-gesture-detector ng-swipeleft="tapButton()"> <div class='selector open'> <ul> <li ng-repeat="data in menuData" style="transform: rotate({{data.reg}}deg);"> 回転 </li> </ul> <button ng-click="tapButton()">タップすると回転</button> </div> </ons-gesture-detector> </ons-page>
app.controller('TestController', function($scope, $timeout, $http) { $scope.menuData = [ {"id":"1","reg":"0"}, {"id":"2","reg":"45"},{"id":"3","reg":"90"},{"id":"4","reg":"135"}, {"id":"5","reg":"180"},{"id":"6","reg":"225"},{"id":"7","reg":"270"},{"id":"8","reg":"315"}]; $scope.tapButton = function(){ var deg =(360/$scope.menuData.length); for(var i=0; i<$scope.menuData.length; i++) { $scope.menuData[i].reg=$scope.menuData[i].reg-45; } } });
あなたの回答
tips
プレビュー