<div ng-app="myApp" ng-controller="myCtrl"> Date format: <input ng-model="format"> <hr/> Current time is: <span my-current-time="format"></span> </div>
javascript结构：
angular.module('myApp', []) .controller('myCtrl', ['$scope', function($scope) { $scope.format = 'M/d/yy h:mm:ss a'; }]) .directive('myCurrentTime', function($interval, dateFilter) { return { restrict: 'AE', link: function(scope, element, attr){ var format, timeoutId; /* 更新时间函数 */ function updateTime() { element.text(dateFilter(new Date(), format)); } /* 监视时间格式的改变 */ var attrWatch = scope.$watch(attrs.myCurrentTime, function(value) { format = value; updateTime(); }); /* 定时器 */ timeoutId = $interval(function() { updateTime(); // update DOM }, 1000); /* 页面跳转后移除定时器防止内存泄露 */ element.on('$destroy', function() { $interval.cancel(timeoutId); attrWatch(); // 移除watch }); } }; });
说明： 在link函数中，操作dom节点，让dom的文本节点动态显示时间跳动。在页面跳转之后及时清除定时器和监视器以免发生内存泄漏。
通过transclude和ng-transclude创建可包裹其他元素的指令
html结构：
<div ng-app="myApp" ng-controller="myCtrl"> <my-dialog>Check out the contents, {{name}}!</my-dialog> </div>
javascript结构：
angular.module('myApp', []) .controller('myCtrl', ['$scope', function($scope) { $scope.name = 'Tobias'; }]) .directive('myDialog', function() { return { restrict: 'E', transclude: true, scope: {}, templateUrl: 'my-dialog.html', link: function(scope) { scope.name = 'Jeff'; } }; });
templateUrl html 结构：
<div ng-transclude></div>
编译后的html结构：
Check out the contents, Tobias!
说明： 指令中的scope本应隔离controller中的作用域的，但是由于设置了transclude=true选项，scope就会继承controller中的定义，所以最终是Tobias而不是Jeff。