カスタムディレクティブがui-gridのcellTemplate内で更新されない

Question

flagというカスタムディレクティブをui-gridに使用しています。この指令は、単に国名（米国またはカナダ）を受け入れ、対応するフラグを表示します。このディレクティブは、ページが初めて読み込まれたときに正常に動作します。しかし、後でフラグの値を何かに変更しても、カスタムディレクティブは新しいフラグを更新して表示しません。私は何が欠けているか分からない。

Plnkr

Answer 1

ディレクティブは、一度コンパイルされます！属性を監視するか、双方向バインドを設定する必要があります。

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 ==>http://plnkr.co/edit/dcHDMEY8MpQnCnm99aDd?p=preview