AngularJS use a directive inside a ng-repeat

Question

I have a directive which I am unable to use inside an ng-repeat block.

Here is my directive:

ap.directive('pastDate', function() {
    return {        
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {
            ctrl.$validators.pastDate = function(modelValue) { // 'pastDate' is the name of your custom validator ...
                var today = new Date();
                today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
                return (new Date(modelValue) > today);
            }
        }
    };
});

Here is the HTML

<ul id="todo-list">
            <li ng-repeat="x in todo">               
                <ng-form name="repeatForm">
                    <button ng-click="open()">{{x.doc._id}}</button>
                    <label class="label label-info">{{x.doc.Name}}</label>
                    <span>{{x.doc.Address1}}</span>
                    <span>{{x.doc.Address2}}</span>
                    <span name="expDt" pastDate>Expiry Date: {{x.doc.IssueDtto}}</span>
                    <span class="help-block" ng-show="repeatForm.expDt.$error.pastDate">Valid Date Required</span>
                </ng-form>
           </li>          

(My requirement is whenever x.doc.IssueDtto is less than current date, I want to highlight it)

Many thanks!

Answer 1

I would do something like this:

Markup:

<div ng-app="myApp">
  <ul id="todo-list" ng-controller="Ctrl">
      <li ng-repeat="x in todo">               
          <ng-form name="repeatForm" highlight="">
              <button ng-click="open()">{{x.doc._id}}</button>
              <label class="label label-info">{{x.doc.Name}}</label>
              <span>{{x.doc.Address1}}</span>
              <span>{{x.doc.Address2}}</span>
              <span name="expDt" past-date="">Expiry Date: {{x.doc.IssueDtto}}</span>
              <span class="help-block" ng-show="repeatForm.expDt.$error.pastDate">Valid Date Required</span>
          </ng-form>
      </li>
  </ul>
</div>

Angular:

var app = angular.module("myApp", []);

app.controller("Ctrl", function($scope) {
    $scope.todo = [
      {
        doc: { 
          _id: 1, 
          Name: 'Buy Food', 
          Address1: 'my address1',
          IssueDtto: '2015-06-22'
        } 
      },
      {
        doc: {
          _id: 2, 
          Name: 'Work', 
          Address1: 'my address2',
          IssueDtto: '2015-06-23'
        } 
      }
    ];
});

app.directive('highlight', function() {
    return {
        restrict: 'A',
        link: function (scope, element) {
          var today = new Date();
          today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
          var issueDate = new Date(scope.x.doc.IssueDtto);
          if(today > issueDate) {
            element.addClass('highlight');
          }
        }
    };
});

Codepen: http://codepen.io/anon/pen/rVYebZ?editors=101

Right now the application highlight the whole line, you can highlight other element if you want.