[AngularJS] Directive. 2 Useful directive

時間 2019-11-26

標籤 angularjs directive useful 欄目 AngularJS 简体版

原文原文鏈接

<!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.css

We can write those code more useful!. Remove "panel" class from Javascript, add it into html.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);
        });
    }
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。