angular 自定义指令 link

function link(scope, element, attrs) { ... } where:

• scope is an Angular scope object.
• element is the jqLite-wrapped element that this directive matches.
• attrs is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values.

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


angular.module('docsTimeDirective', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.format = 'M/d/yy h:mm:ss a';
}])
.directive('myCurrentTime', ['$interval', 'dateFilter', function($interval, dateFilter) {

  function link(scope, element, attrs) {
    var format,
        timeoutId;

    function updateTime() {
     //format从watch方法里获得
      element.text(dateFilter(new Date(), format));
    }

    scope.$watch(attrs.myCurrentTime, function(value) {
      format = value;//value:M/d/yy h:mm:ss a
      updateTime();
    });

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

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

  return {
    link: link
  };
}]);

 

转载于:https://www.cnblogs.com/xiaotaiyang/p/4829227.html