0

CSS ローテーションがランダムな img が必要です。私はこれを達成することができましたが、リーフレット マップの上にマウスを移動すると、img は常に回転しています。

http://jsfiddle.net/J03rgPf/mzwwfav4/3/

getRandRot 関数が何度も呼び出されないように、ランダム css を 1 回だけ設定するにはどうすればよいですか?

<body ng-controller="DemoController">
 <leaflet center="center"></leaflet>
 <div class="{{getRandRot()}}">
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Surfers_at_Mavericks.jpg/320px-Surfers_at_Mavericks.jpg" />
 </div>  
</body>

Angular JS コード:

var app = angular.module('demoapp',['leaflet-directive']);

app.controller('DemoController', [ '$scope', 'leafletData', function($scope, leafletData) {
    angular.extend($scope, {
        center: {
            lat: 51.505,
            lng: -0.09,
            zoom: 5
        }
    })

    $scope.getRandRot = function(){
        var rotations = [ "rotate-10", "rotate-5", "rotate5", "rotate10" ];
        var rand = Math.floor(Math.random() * rotations.length);
        return rotations[rand];  
      }
}]);

CSS

.angular-leaflet-map {
    width: 100%;
    height: 280px;
}

.rotate-10{
    -moz-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}
.rotate-5{
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
}
.rotate5{
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
}
.rotate10{
    -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
}
4

1 に答える 1

1

getRandRot への呼び出しの応答をコントローラーの値に割り当てますか?

を使用して、各ダイジェスト フェーズ内で呼び出されるclass={{ getRandRot() }}バインドを作成します。getRandRot

これはトリックを行います：

HTML

 <body ng-controller="DemoController">
   <leaflet center="center"></leaflet>
   <div ng-class="randRot">
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Surfers_at_Mavericks.jpg/320px-Surfers_at_Mavericks.jpg" />
   </div>  
</body>

JS

var app = angular.module('demoapp',['leaflet-directive']);

app.controller('DemoController', [ '$scope', 'leafletData', function($scope, leafletData) {
    angular.extend($scope, {
        center: {
            lat: 51.505,
            lng: -0.09,
            zoom: 5
        }
    })

    getRandRot = function(){
        var rotations = [ "rotate-10", "rotate-5", "rotate5", "rotate10" ];
        var rand = Math.floor(Math.random() * rotations.length);
        return rotations[rand];  
      }

    $scope.randRot = getRandRot();
}]);

ちなみに、ng-class は、angular を使用して要素にクラスを動的に設定するための推奨される方法です。

お役に立てれば。

于 2015-01-07T16:53:20.013 に答える