简话Angular 06 Angular自定义指令

一句话: 直接return link函数可以解决大多数问题,无须死扣用法

1. 上源码 (dom操作,事件,css,mode操作全包括了)

 <h3>Custom directive, with dom operation, events, css and scope model operation</h3> 

         <div ng-controller="DateController">
           Date format: <input ng-model="format"> <hr/>
           Current time is: <span my-current-time="format"></span>
         </div>

         <script>
         var myApp = angular.module('myApp', []);

         myApp.controller('DateController', function($scope) {
             $scope.format = "M/d/yy h:mm:ss a";
         });

         myApp.directive('myCurrentTime', ['$interval', 'dateFilter', function($interval, dateFilter) {
             function link(scope, element, attrs) {
                 var format, timeoutId;

                 function getRandomColor() {
                     var letters = '0123456789ABCDEF'.split('');
                     var color = '#';
                     for (var i = 0; i < 6; i++ ) {
                         color += letters[Math.floor(Math.random() * 16)];
                     }
                     return color;
                 }

                 function updateTime() {
                     element.text(dateFilter(new Date(), format));
                     element.css({'background-color': getRandomColor()});
                 }

                 scope.$watch(attrs.myCurrentTime, function(value) {
                     format = value;
                     updateTime();
                 });

                 element.on('$destroy', function() {
                     $interval.cancel(timeoutId);
                 });

                 element.on('click', function(){
                     alert('Date format is changing to yyyy/MM/dd hh');
                     scope.format = "yyyy/MM/dd hh " + getRandomColor();
                 });

                 // start the UI update process; save the timeoutId for canceling
                 timeoutId = $interval(function() {
                     updateTime(); // update DOM
                 }, 1000);
             }

             return {
                 link: link
             };
         }]);
         </script>
     </div>

2. 在线查看运行效果

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

3. 项目地址

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