Jane Angular angular custom directives

Bottom line: The direct return link function solves most problems without merely usage

1. On the source code (DOM operation, event, Css,mode operation all included)

1 <H3>Custom directive, with DOM operation, events, CSS and scope model operation</H3> 2         3 4         <DivNg-controller= "Datecontroller">5Date format:<inputNg-model= "format"> <HR/>6Current time is:<spanMy-current-time= "format"></span>7         </Div>8 9 Ten  One         <Script> A         varmyApp=Angular.module ('myApp', []); -  - Myapp.controller ('Datecontroller', function($scope) { the $scope. Format= "M/d/yy H:mm:ss a"; -         }); -          - myapp.directive ('Mycurrenttime', ['$interval', 'Datefilter', function($interval, datefilter) { +             functionlink (scope, element, Attrs) { -                 varformat, Timeoutid; +  A                 functionGetrandomcolor () { at                     varLetters= '0123456789ABCDEF'. Split ("'); -                     varColor= '#'; -                      for (varI= 0; I< 6; I++ ) { - Color+=Letters[math.floor (Math.random ()*  -)]; -                     } -                     returncolor; in                 } -  to                 functionUpdateTime () { + Element.text (Datefilter (NewDate (), format)); - Element.css ({'Background-color': Getrandomcolor ()}); the                 } *  $ scope. $watch (Attrs.mycurrenttime,function(value) {Panax Notoginseng format=value; - updatetime (); the                 }); +  A Element.on ('$destroy', function() { the $interval. Cancel (timeoutid); +                 }); -  $ Element.on ('Click', function(){ $ Alert ('Date format is changing to YYYY/MM/DD hh'); - Scope.format= "yyyy/mm/dd hh" +Getrandomcolor (); -                 }); the  -                 //start the UI update process; Save the Timeoutid for cancelingWuyi Timeoutid=$interval (function() { the updatetime ();//Update DOM -                 },  +); Wu             } -  About             return { $ Link:link -             }; -         }]); -         </Script> A     </Div>

2. View the results of the operation online

Http://jimuyouyou.github.io/angular-bootstrap-rest-seed/examples/angular/6-custom-directive.html

3. Project Address

Github:https://github.com/jimuyouyou/angular-bootstrap-rest-seed

Jane Angular angular custom directives