Question

我在div上有一个背景图片，我希望在悬停时切换。我无法更改类，因为我正在使用绑定属性来填充信息。据我所知，我没有看到任何方法在html中添加hover样式并且我找到了一种方法在jquery中执行它但它看起来不像是有角度的方式。

Answer 1

方法＃1 ：没有控制器，模板中的所有内容。

<div ng-init="bg = ''" 
    ng-mouseenter="bg = 'http://www.gravatar.com/avatar/b76f6e92d9fc0690e6886f7b9d4f32da?s=100'" 
    ng-mouseleave="bg = ''" 
    style="background-image: url({{bg}});">
</div>

方法＃2 ：使用vars存储值（使用控制器）

<div ng-mouseenter="bg = imageOn" 
    ng-mouseleave="bg = imageOff" 
    style="background-image: url({{bg1}});">
</div>

控制器：

function myCtrl($scope){
    $scope.bg1 = "" // this is the default image.
    $scope.imageOn = "http://www.gravatar.com/avatar/b76f6e92d9fc0690e6886f7b9d4f32da?s=100";
    $scope.imageOff = ""; // image that would after after the mouse off.
}

方法＃3 ：为最后保存最好的！使用指令!!

<div hover-bg-image="{{image}}"></div>

指令（可以改进以恢复原始图像，如果有一个...它的基本显示示例）：

.directive('hoverBgImage',function(){
    return {
        link: function(scope, elm, attrs){
            elm.bind('mouseenter',function(){
                this.style.backgroundImage = 'url('+attrs.hoverBgImage+')';
            });
            elm.bind('mouseleave',function(){
                this.style.backgroundImage = '';
            })
        }
    };
});

控制器：

function withDirective($scope){
    $scope.image = "http://www.gravatar.com/avatar/b76f6e92d9fc0690e6886f7b9d4f32da?s=100";
}

注意：控制器中的项目可以/应该/将动态设置。

演示：http://jsfiddle.net/TheSharpieOne/kJgVw/1/

如何在Angularjs方式的div上添加悬停背景图像样式

1 个答案: