title: ng-grid and custom directives with images
body: <p>We are having pretty major issues with ng-grid and directives. </p>
  
  <p>Basically we have an ng-grid, and we have a directive that supplies an image. </p>
  
  <p><strong>What we have done:-</strong></p>
  
  <ol>
  <li><p>created a simple directive that displays an image
  issue :- on scrolling the image tended to jump up and down onto different rows</p></li>
  <li><p>After much googling, discovered that we should use a $watch statement, 
  so now our directive looks like :-  </p></li>
  </ol>
  
  <p>.</p>
  
  <pre><code>MyLists.directive('status', function () {
      return {
          restrict: 'E',
          replace: true,
          template: '&lt;div ng-switch="alert"&gt;' +
                      '&lt;div ng-switch-when=""&gt;&lt;/div&gt;' +
                      '&lt;div ng-switch-default&gt;&lt;img src="{{alert}}.ictrl" /&gt;&lt;/div&gt;' +
                    '&lt;/div&gt;',    
          scope: { alertData: '=alertData' },        
          link: function (scope, element, attrs) {            
              function updateICAlert(stralert) {
                  scope.alert = "";
                  if ((stralert !== null) &amp;&amp; (stralert !== undefined) &amp;&amp; (stralert !== '')) {
                      scope.alert = stralert;
                  }
                  return scope.alert;
              } //function    
              scope.$watch('alertData', function (oldValue, newValue) {                
                  if (newValue) {
                      updateICAlert(scope.alertData);
                  }
              });           
          }           
      }
  });
  </code></pre>
  
  <p>This now at least stops the image from jumping rows, however,  the new issue :-</p>
  
  <p>the grid is now suddenly running really slow, and clicking on the column header (for ordering) is also duplicating data..</p>
  
  <p>Are we missing something with this?</p>