[AngularJS] Directive. 2 Useful directive
angularjs directive
2023-09-14 09:00:56 时间
<!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); }); } });
相关文章
- angularjs post
- [AngularJS] Decorator a directive
- [AngularJS] 'require' prop in Directive or Component
- [AngularJS] Accessing The View-Model Inside The link() When Using controllerAs
- [D3 + AngularJS] 15. Create a D3 Chart as an Angular Directive
- [AngularJS] Introduction to angular-formly
- [AngularJS] Filter filter Ex
- [AngularJS] Reusable directive, require from parent controller
- [AngularJS] A Flexible Card Directive && isolate scope
- [AngularJS - thoughtram] Exploring Angular 1.3: Binding to Directive Controllers
- [AngularJS] ui-router: Abstract States
- [Grunt + AngularJS] Using ng-annotate for min-safe AngularJS
- [AngularJS]23. Refactoring Product Gallery, Custom directive
- [AngularJS] Decorator a directive
- [AngularJS] 'require' prop in Directive or Component
- [D3 + AngularJS] 15. Create a D3 Chart as an Angular Directive
- [AngularJS + Gulp] Gulp task
- [AngularJS - thoughtram] Exploring Angular 1.3: Binding to Directive Controllers
- [AngularJS] Directive with Transcluded Elements
- [AngularJS] Directive Definition Objects (DDO)
- [AngularJS] Angular 1.3 ngMessages with ngAnimate
- [AngularJS] Debug Directive, terminal, priority
- [AngularJS] Transclude -- using what existing in DOM to replace the template elements in directive
- [AngularJS]26. !Improtant, Two ways banding and scope to make directive reuseable
- AngularJS Slider指令(directive)扩展
- angularJS socket
- AngularJS in Action读书笔记2——view和controller的那些事儿
- AngularJS directive入门例子