Question

我是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中定义）将淡入，在mouseleave上元素将淡出。所以我实现了一个控制器和一个指令：

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-Button的图像。如何才能获得事件被触发的元素的属性？在指令中总是来自与指令匹配的所有元素的所有属性。

编辑：是否有更简单的方法来实现fadeIn和fadeOut效果？

Answer 1

不是试图通过作用域或控制器控制DOM事件，而是将该事件绑定逻辑移动到指令，然后在那里使用普通的jquery。在大多数情况下，您不需要使用范围事件与指令通信。

显示比解释更容易（结帐the fiddle）

<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);                   
                });                
            });
        }
    };
});

只从元素中获取属性，其中在AngularJS中触发了Event

1 个答案: