Question

尝试使用指令在点击时淡化图像。当图像首次出现时（初始页面加载），该指令很有效，很好地淡化它，但这不会发生在点击上，它只是在没有淡入淡出的情况下切换。如何才能使指令fade-in与ng-click="onClick()"事件一起使用？

我尝试在$element.addClass("ng-hide-add");的{{1}}周围添加超时，但它没有用。

Here's a plunkr

这是html：

directive

这里是js：

 <img ng-src="img/{{randTarotImg}}.jpg" class="tarot animate-show" ng-click="onClick()" fade-in/>

这是css：

angular.module('TarotApp')
    .controller('TarotCtrl', function ($scope) {

        $scope.tarotImg = [];
          for (var i=1;i<=6;i++) {
          $scope.tarotImg.push(i);
        }  

        $scope.randTarotImg = $scope.tarotImg[Math.floor(Math.random() * $scope.tarotImg.length)];

        $scope.onClick = function() {
              $scope.randTarotImg = $scope.tarotImg[Math.floor(Math.random() * $scope.tarotImg.length)];  
        };

})

    .directive('fadeIn', function($timeout){
        return {
            restrict: 'A',
            link: function($scope, $element, attrs){
                $element.addClass("ng-hide-remove");
                $element.on('load', function() {
                    $element.addClass("ng-hide-add"); 
                });
            }
        };
});

Answer 1

在你的指令中试试这个：

.directive('fadeIn', function($timeout){
    return {
        restrict: 'A',
        link: function($scope, $element, attrs){
            $element.addClass("ng-hide-remove");
            $element.on('load', function() {
                $timeout($element.addClass("ng-hide-add"),1000);//Adding timeout
            });
        }
    };

希望这有帮助。

单击指令时图像中的角度淡入淡出

1 个答案: