0

我是 AngularJS 的新手。我尝试从 Backbone.js 迁移到 Angular，首先我想我想做的很简单：fadeIn 和 fadeOut。

所以我的 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>

所以思路是：如果鼠标在prev-button 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 回答