directive personnalisée ne soit pas mis à jour à l'intérieur de CellTemplate ui-grid

Question

J'utilise une directive personnalisée nommée flag à l'intérieur du cellTemplate de ui-grid. Cette directive accepte simplement un nom de pays (USA ou CANADA) et affiche son drapeau correspondant. La directive fonctionne correctement lorsque la page est chargée pour la première fois. Cependant, plus tard même si je change la valeur de l'indicateur en n'importe quoi, la directive personnalisée ne met pas à jour et affiche le nouveau drapeau. Je ne suis pas sûr de ce qui me manque.

Plnkr

Answer 1

La directive est compilée une fois! Vous devez regarder l'attribut ou définir une liaison bidirectionnelle!

app.directive('flag', function() { 
    var flags = { 
    USA: 'https://github.com/hjnilsson/country-flags/raw/master/png100px/us.png', 
    CANADA: 'https://github.com/hjnilsson/country-flags/raw/master/png100px/ca.png' 
    }; 

    return { 
     restrict: "A", 
     scope: { 
      flag: "@" 
     }, 
     link: function(scope, elem, attrs) { 
      scope.$watch('flag', function(newValue, oldValue){ 
       angular.element(elem).attr('src', flags[newValue]); 
      }); 
     } 
    }; 
}); 

plunkr travail ==>http://plnkr.co/edit/dcHDMEY8MpQnCnm99aDd?p=preview