简话Angular 06 Angular自定义指令

<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>