简话Angular 06 Angular自定义指令

 1 <h3>Custom directive, with dom operation, events, css and scope model operation</h3> 
 2         
 3 
 4         <div ng-controller="DateController">
 5           Date format: <input ng-model="format"> <hr/>
 6           Current time is: <span my-current-time="format"></span>
 7         </div>
 8 
 9 
10 
11         <script>
12         var myApp = angular.module(‘myApp‘, []);
13 
14         myApp.controller(‘DateController‘, function($scope) {
15             $scope.format = "M/d/yy h:mm:ss a";
16         });
17         
18         myApp.directive(‘myCurrentTime‘, [‘$interval‘, ‘dateFilter‘, function($interval, dateFilter) {
19             function link(scope, element, attrs) {
20                 var format, timeoutId;
21 
22                 function getRandomColor() {
23                     var letters = ‘0123456789ABCDEF‘.split(‘‘);
24                     var color = ‘#‘;
25                     for (var i = 0; i < 6; i++ ) {
26                         color += letters[Math.floor(Math.random() * 16)];
27                     }
28                     return color;
29                 }
30 
31                 function updateTime() {
32                     element.text(dateFilter(new Date(), format));
33                     element.css({‘background-color‘: getRandomColor()});
34                 }
35 
36                 scope.$watch(attrs.myCurrentTime, function(value) {
37                     format = value;
38                     updateTime();
39                 });
40 
41                 element.on(‘$destroy‘, function() {
42                     $interval.cancel(timeoutId);
43                 });
44 
45                 element.on(‘click‘, function(){
46                     alert(‘Date format is changing to yyyy/MM/dd hh‘);
47                     scope.format = "yyyy/MM/dd hh " + getRandomColor();
48                 });
49 
50                 // start the UI update process; save the timeoutId for canceling
51                 timeoutId = $interval(function() {
52                     updateTime(); // update DOM
53                 }, 1000);
54             }
55 
56             return {
57                 link: link
58             };
59         }]);
60         </script>
61     </div>