0

AngularJS は初めてです。私は Backbone.js から Angular に移行しようとしていますが、最初に非常に単純なフェードインとフェードアウトを行いたいと考えています。

したがって、私のHTMLは次のようになります。

<div id="calendar" style="padding-left: 50px" ng-controller="CalendarButtonController">
    <!-- prev button -->
    <div class="calendar-btn prev" ng-mouseover="fadeIn()" ng-mouseleave="fadeOut()" fade-duration="5000" fade-target="btnPrev">
        <img id="btnPrev" src="img/btn-prev_hover.png"> 
    </div>

    <!-- next button -->
    <div class="calendar-btn next" ng-mouseover="fadeIn()" ng-mouseleave="fadeOut()" fade-duration="5000" fade-target="btnNext">
        <img id="btnNext" src="img/btn-next_hover.png">
    </div>
</div>

したがって、アイデアは次のとおりです。マウスが前ボタンのdivの上にある場合、div内の画像がフェードインします。fade-target-Attributeには、フェードされる要素の特定のIDがあります。要素 (fade-target-Attribute で定義) をマウスオーバーするとフェードインし、マウスを離すと要素がフェードアウトします。だから私はコントローラーとディレクティブを実装しました：

function CalendarButtonController($scope){
    $scope.fadeIn = function() {
        $scope.$emit('event', 'fadeIn');
    }

    $scope.fadeOut = function() {
        $scope.$emit('event', 'fadeOut');
    }
}

angular.module('components', [])
    .directive('fadeDuration', function ($rootScope) {
        return {
            restrict: 'A',
            link: function(scope, el, attrs) {              
                $rootScope.$on('event', function(event, message) {
                    if(message  == "fadeIn"){
                        fadeIn();
                    }

                    if(message  == "fadeOut"){
                        fadeOut();
                    }
                });

                function fadeIn(){
                    $('#'+attrs.fadeTarget).fadeIn(attrs.fadeDuration);             
                }

                function fadeOut(){
                    $('#'+attrs.fadeTarget).fadeOut(attrs.fadeDuration);                
                }
            }
        }       
    });

要素のフェードインとフェードアウトは機能しますが、問題は次のとおりです。マウスを prev-button-div の上に移動すると、両方の画像 (prev-Button と next-Button) がフェードインします。ただし、prev の画像のみフェードインする必要があります。 -ボタン。イベントが発生した要素の属性のみを取得するにはどうすればよいですか? ディレクティブには、ディレクティブに一致するすべての要素のすべての属性が常に含まれます。

編集:そして、フェードインとフェードアウト効果を実現する簡単な方法はありますか?

4

1 に答える 1

0

スコープまたはコントローラーを介して DOM イベントを制御しようとする代わりに、そのイベント バインディング ロジックをディレクティブに移動し、そこで通常の jquery を使用します。ほとんどの場合、スコープ イベントを使用してディレクティブと通信する必要はありません。

説明するよりも簡単に表示できます（フィドルをチェックしてください）

<div ng-controller="itemsController">
    <div ng-repeat="item in items">
        <div class="item" fade="mouseover" fade-duration="5000" fade-target="item-{{item.name}}">
            <span id="item-{{item.name}}">{{item.name}}</span>
        </div>        
    </div>    
</div>

myApp.controller('itemsController', function($scope) {
    $scope.items = [{ name: 'Foo' }, { name: 'Bar'}, { name: 'Baz'}];    
});

myApp.directive('fade', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {

            var fadeDuration = attrs.fadeDuration || 100;
            var onEvent = attrs.fade || "mouseover";

            // See how the directive alone controls the events, not the scope
            element.on(onEvent, function() {
                var targetElement = $('#' + attrs.fadeTarget);
                targetElement.fadeOut(fadeDuration, function(){
                   targetElement.fadeIn(fadeDuration);                   
                });                
            });
        }
    };
});
于 2013-01-25T14:08:56.640 に答える