提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

[AngularJS] Directive. 2 Useful directive

angularjs directive
2023-09-14 08:59:21 时间 
<!DOCTYPE html>
<html>
    <head>
        <title>Angular Directive</title>
        <link rel="stylesheet" href="foundation.min.css" />
        <script src="angular.min.js"></script>
        <script src="main.js"></script>
    </head>
    <body ng-app="behaviorApp">
        <div enter leave>I'm content!</div>
    </body>
</html>
app.directive('enter', function(){
    return function(scope, element){
        element.bind("mouseenter", function(){
            element.addClass("panel");
        });
    }
});

app.directive('leave', function(){
    return function(scope, element){
        element.bind("mouseleave", function(){
            element.removeClass("panel");
        });
    }
});

The code is to check when you mouse enter a div, it will add a "panel" class defined in fundation.min.css, when it leaves will remove the panel calss.

 

We can write those code more useful!. Remove "panel" class from Javascript, add it into html.

    <body ng-app="behaviorApp">
        <div enter="panel" leave>I'm content!</div>
    </body>
app.directive('enter', function(){
    return function(scope, element, attrs){
        element.bind("mouseenter", function(){
            element.addClass(attrs.enter);
        });
    }
});

app.directive('leave', function(){
    return function(scope, element, attrs){
        element.bind("mouseleave", function(){
            element.removeClass(attrs.enter);
        });
    }
});

 

相关文章